为什么这个 jQuery 选择器不起作用？答案

【问题标题】：Why isn't this jQuery selector working?为什么这个 jQuery 选择器不起作用？
【发布时间】：2013-07-31 02:37:23
【问题描述】：

JavaScript：

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

有什么想法吗？

【问题讨论】：

您的脚本是否在 HTML 之前加载？
是的，脚本在 head 元素中。

标签： jquery css jquery-selectors hover

【解决方案1】：

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

http://jsfiddle.net/deJNU/

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

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

*编辑：您还缺少准备好的文档，无需对我的正确答案投反对票..

【讨论】：

所有 4 个答案都缺少 on 方法没有悬停这一点。感谢您对我的正确答案投反对票。（虽然 doc ready 也是一个我没有注意到的问题）
你所有的反对票都被推迟了——这解决了我的问题。必须使用鼠标输入，而不是悬停（以及准备好文档）。当计时器在 2 分钟后到时，将其标记为答案。谢谢！！！！！！！！！！！！
Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions. DOC

【解决方案2】：

尝试以这种方式使用它：

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

【讨论】：

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

【解决方案3】：

将<script> 标签移动在 #aboutme 之后（最好在</body> 之前）或使用：

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

【讨论】：

照做了，还是不行，见：livingfit.wordpress.redcow.ca

【解决方案4】：

试试这个：

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

【讨论】：