在悬停jquery上显示GIF图像，什么也没有发生

问题描述：

好吧，我有一个视频中心，它显示了一个眼睛开闭的循环。后面我有一个隐藏的div，其中包含一个GIF的眼睛关闭。我想要实现的是当用户悬停一个按钮时，GIF会显示在视频上方。这是我到目前为止有：在悬停jquery上显示GIF图像，什么也没有发生

jQuery的

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    <script language="text/javascript"> 
     var image = new Image(); 
     image.src = "eye.gif"; 
     $("#apDiv1").hover(function() { 

      $("#gif").show().attr('src', image.src); 
     }, function(){ 
      $("#gif").hide(); 
     }); 
     </script>

HTML按钮：

<div id="apDiv1"> 
           <li> 
            <a href="../designcompany/index.html"> 
            <span class="ca-icon">Mode</span> 
            </a>      
           </li> 
          </div>

HTML电影和GIF：

<div id="w"> 


    <img id="gif" src="eye.gif"/> 
            <div id="videoplayer"> 
             <center> 
              <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400" > 
              <source src="./media/eye.mp4" type="video/mp4"> 
              </video> 
             </center> 
            </div> 
          </div>

CSS：

#gif{ 
display:none; 
}

答

如果你想要一个元素在另一个元素的“顶部”，你必须将它的z-index设置为一个更高的数字。

的z-index是不是这里的问题......这是关于中心图像（CSS），尝试他的代码，你会看到... – sagibb 2013-03-21 22:22:39

它仍然没有显示GIF，这是我的完整代码：http://pastebin.com/sD15muFw – user2197083 2013-03-21 22:44:27

答

我想archieve是，当用户将鼠标悬停按钮的GIF显示视频

$("#apDiv1").hover(
      function() { 
      $("#gif").show().attr('src', image.src); 
      $('#gif').css('z-index','999999'); 
      $('#videoplayer').css('z-index','999'); 
      }, 

      function(){ 
      $("#gif").hide(); 
     });

答

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> 
    <script language="text/javascript"> 
     //your code is here 
    </script> 
</script>

这不会工作，你需要关闭的第一个脚本标签上面：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     //your code now goes here 
    }); 
</script>

而且我认为语言属性在20世纪90年代流行（大约同一时间中心标签消失了）？

然后放置在正确的顺序元素：

<div id="apDiv1"> 
    <div id="videoplayer" style="margin: 0 auto; position: relative;"> 
     <video id="intro" autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted" width="1024" height="400"> 
      <source src="./media/eye.mp4" type="video/mp4" /> 
     </video> 
     <img id="gif" src="eye.gif" style="display: none; position: absolute; top:0; left:0;"/> 
    </div> 
</div>

而且隐藏和显示图像：

$("#apDiv1").on('mouseenter mouseleave', function(e) { 
    $("#gif").toggle(e.type==='mouseenter') 
});

在悬停jquery上显示GIF图像，什么也没有发生

相关推荐