为什么不是这个jQuery选择器工作？

的JavaScript：为什么不是这个jQuery选择器工作？

<script> 

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

</script>

HTML（CSS内嵌现在）：

  <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的图像上时，控制台中没有任何反应。

任何想法？

来源

2013-07-30 Samuel Stiles

您的脚本是否在HTML之前加载？ – jprofitt

是的，脚本在头元素中。 –

不要使用hover与on，用mouseout或同等mouseenter mouseout（一起）：

http://jsfiddle.net/deJNU/

或者使用悬停的方法，像这样：

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

*编辑：你还缺少文件准备好了，不需要向下投票我的正确答案。

来源

2013-07-30 19:30:57

所有4个答案都缺少on方法没有悬停的观点。感谢您投下我的正确答案。（尽管doc准备好也是我没有注意到的问题） –

所有的downvotes都被推迟了 - 这解决了我的问题。必须使用mouseenter，而不是悬停（以及准备好文档）。将计时器在2分钟内启动时标记为答案。谢谢！！！！！！！！！！！ –

'在jQuery 1.8中不推荐使用，在1.9中移除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加一个事件处理程序，处理程序必须检查event.type以确定该事件是mouseenter还是mouseleave。不要将“悬停”伪事件名称与接受一个或两个函数的.hover（）方法混淆。[DOC]（http://api.jquery.com/on/#additional-notes） –

试试这个：

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

来源

2013-07-30 19:27:24

还行不通 –

无论是后移动<script>标签#aboutme（最好是右</body>之前）或使用：

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

来源

2013-07-30 19:28:01

这样做还是不行，看：livingfit.wordpress.redcow.ca –

尝试使用这种方式：

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

来源

2013-07-30 19:28:18 MonkeyZeus

我这样做了，还是不行，看这里：livingfit.wordpress.redcow.ca –

为什么不是这个jQuery选择器工作？

回答

相关问题