在懸停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; 
}

來源

2013-03-21 user2197083

如果你想要一個元素在另一個元素的「頂部」，你必須將它的z-index設置爲一個更高的數字。

來源

2013-03-21 22:15:17

的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(); 
     });

來源

2013-03-21 22:18:30

<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') 
});

來源

2013-03-21 22:19:29 adeneo

在懸停jquery上顯示GIF圖像，什麼也沒有發生

回答

相關問題