jQuery的：GIF未能出現時將鼠標懸停在

打印屏幕上顯示它的樣子：http://i50.tinypic.com/24nl15w.png jQuery的：GIF未能出現時將鼠標懸停在

什麼我試圖archieve是，當用戶將鼠標懸停在按鈕中的一個隱藏的div其包含眨眼的GIF將出現在視頻上方。問題是什麼都沒有發生，我如何選擇同一個GIF出現的多個按鈕？感謝提前:)

<!doctype html> 
    <html lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
     <title></title> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
     <meta name="HandheldFriendly" content="true"> 
     <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 
     <link rel="stylesheet" type="text/css" href="./css/global.css"> 
     <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Skranji"> 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $("#apDiv1").hover(
       function() { 
       $("#gif").show().attr('src', image.src); 
       $('#gif').css('z-index','999999'); 
       $('#videoplayer').css('z-index','999'); 
       }, 

       function(){ 
       $("#gif").hide(); 
      }); 
     </script> 

    </head> 

    <body> 
     <div id="center"> 
      <ul id="ca-menu"> 
           <div id="apDiv1"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
           <div id="apDiv2"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
           <div id="apDiv3"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
           <div id="apDiv4"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
           <div id="apDiv5"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
           <div id="apDiv6"> 
            <li> 
             <a href="../designcompany/index.html"> 
             <span class="ca-icon">Mode</span> 
             </a>      
            </li> 
           </div> 
          </ul> 

          <div id="w"> 
           <img id="gif" src="eye.gif" style="display: none; position: absolute; top:0; left:0;"/> 
            <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> 

    </body> 
    </html>

來源

2013-03-22 user2197083

你缺乏

$(document).ready(function(){ 
    /*...your stuff goes here...*/ 
});

應該換什麼樣的jQuery您目前擁有。這種方式jQuery將等待，直到您的DOM被您的瀏覽器完全讀取並且ready被操縱。

http://api.jquery.com/ready/

，或者你可以使用一個有用的速記document.ready，如：

$(function(){ // Now DocumentObjectModel is ready 
    /* your stuff in here */ 
});

來源

2013-03-22 00:33:44 dezman

@roXon甜!!! – dezman 2013-03-22 00:46:36

感謝它現在的作品！但是，如何選擇此行上的所有div按鈕：$（「＃apDiv1」）。hover（ – user2197083 2013-03-22 00:53:15

）您的意思是apDiv 1- 6？那將是：$（'ca-menu> div'），但它可能會更好給他們所有的課程，做$（'。yourClass'） – dezman 2013-03-22 00:55:20

我只是測試你的代碼，它運行jsFiddle 我會檢查控制檯，看是否有任何鏈接爆發

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

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

來源

2013-03-22 00:39:06

jQuery的：GIF未能出現時將鼠標懸停在

回答

相關問題