이 jQuery 선택기가 작동하지 않는 이유는 무엇입니까?

Question

자바 스크립트 : (지금은 CSS를 인라인)

<script> 

$('#aboutme').on('hover', function(){ 
    console.log("All the stuff"); 
    /* $("#aboutmedropdown").css("dispay","block"); */ 
}); 

</script> 

HTML은 :

  <div class="nav"> 
       <ul class="navlist"> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-home.png" alt="Navigation Home"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-about.png" id="aboutme" alt="Navigation About"></a> 
         <div id="aboutmedropdown" style="width: 150px; position: absolute; background-color: #FFFFFF;"> 
          <ul style="list-style: none; padding: 0; margin: 0; border-bottom: 5px solid #8cc419;" class="sub_menu"> 
           <li style="display: block; font-size: 16px; line-height: 20px; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">About Me</a></li> 
           <li style="display: block; font-size: 16px; line-height: 20px; color: #8CC419; text-align: center; border-bottom: 1px solid #8cc419;"><a href="#" style="color: #8CC419;">Testimonials</a></li> 
          </ul> 
         </div> 
        </li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-yoga.png" alt="Navigation Yoga"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-pilates.png" alt="Navigation Pilates"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-fitness.png" alt="Navigation Fitness"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-media.png" alt="Navigation Media"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-fitcamp.png" alt="Navigation Fitcamp"></a></li> 
        <li style="position: relative;"><a href="#"><img src="/img/nav-blog.png" alt="Navigation Blog"></a></li> 
       </ul> 
      </div> 

나는 요소를 검사하고 분명하게 내가 위로 마우스를 이동하는 데 필요한 이미지에 적절한 ID를 가지고 있는지 볼 수 있어요 - - #aboutme.

페이지 소스를보고 있는데 내 <script> 및 jQuery이로드되어 있습니다.

그러나 ID가 aboutme 인 이미지 위로 마우스를 가져 가면 콘솔에서 아무 반응이 없습니다.

아이디어가 있으십니까?

Answer 1

의 on와 hover를 사용 (함께) mouseout 또는 동등한 mouseenter mouseout를 사용

http://jsfiddle.net/deJNU/

는 다른 방법과 같이 호버 방법을 사용하십시오

$('#aboutme').hover(function() { 
    console.log('hover in'); 
}, function() { 
    console.log('hover out'); 
}); 

* 편집 : 또한 누락 된 문서를 준비, 내 올바른 대답을 다운 투표 할 필요가 없습니다.

Answer 2

이 시도 :

$(document).ready(function(){ 
    $(document).on('hover', '#aboutme' , function(){ 
     console.log("All the stuff"); 
     /* $("#aboutmedropdown").css("dispay","block"); */ 
    }); 
}); 

Answer 3

을 어느 후 <script> 태그를 이동#aboutme (바람직 바로 </body> 전) 또는 사용 :

//equivalent to $(document).ready(function() { 
$(function() { 
    $('#aboutme').on('hover', function() { 

Answer 4

이런 식 사용해보십시오 :

$(document).on('hover', '#aboutme', function(){ 
    console.log("All the stuff"); 
    /* $("#aboutmedropdown").css("dispay","block"); */ 
}); 

을