Jquery: GIF не появляется при наведении курсора над

Отпечаток экраном, чтобы показать, как это выглядит: http://i50.tinypic.com/24nl15w.png Jquery: GIF не появляется при наведении курсора над

То, что я пытаюсь что АРХИВ когда пользователь наводит курсор на одну из кнопок скрытый сНу, который содержит 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 sweet !!! – dezman

Спасибо, что работает сейчас !!! Но как выбрать все кнопки div в этой строке: $ ("# apDiv1"). Hover ( – user2197083

Вы имеете в виду apDiv 1- 6? Это будет: $ ('ca-menu> div'), но это может быть лучше чтобы дать им весь класс и сделать $ ('. yourClass') – dezman

Я просто проверял свой код и он работает 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 не появляется при наведении курсора над

ответ

Смежные вопросы