为什么不能将鼠标悬停在第一项上

Question

我尝试在 div 中的未排序列表上使用 jQuery hover() 方法。当将鼠标移到其中一个列表项上时没有任何反应，但是当将其移到第二个列表项上时，反应是程序化的（下划线）。如果我然后回到第一个项目，它也会按照程序做出反应，那么为什么它第一次不这样做呢？如果我使用 div 而不是 li，或者当我将 preventDefault() 添加到 jQuery 方法时，也会出现同样的问题。 hover not working for items in list这个问题的答案我看过了，但是也不管用。

这是 html 代码：

<div id="div1">
    <ul>
        <li id="res0">first line</li>
        <li id="res1">second line</li>
        <li id="res2">third line</li>
    </ul>
</div>

和脚本：

$("#div1").hover(function() {

    $("#res0").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });

    $("#res1").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });

    $("#res2").hover(function() {
        $(this).css("text-decoration","underline");
        document.body.style.cursor="pointer";
    }, function(){
        $(this).css("text-decoration","none");
        document.body.style.cursor="default";
    });
});

如果有人能告诉我哪里出了问题，我将不胜感激！

这是 url：http://www.arcro.nl/tests/test3.php

Answer 1

您可以像这样减少代码，

$("#div1 li").hover(function () {
    $(this).css("text-decoration", "underline");
    document.body.style.cursor = "pointer";
}, function () {
    $(this).css("text-decoration", "none");
    document.body.style.cursor = "default";
});

Fiddle

Answer 2

首先，用js做是错误的！您可以使用 css 轻松完成。

#res:hover {
    text-decoration:none;
}

至于您问题的答案，您在主悬停绑定中有悬停绑定。不确定，但这会产生某种冲突。如果你想那样做，只需将所有 'li' 悬停在顶部而不是主要悬停功能内。

Answer 3

只是要回答为什么它不能处理第一项，因为其他人用代码回答了。当悬停父 div 时，您将事件处理程序分配给 li。由于它们在悬停之前还没有事件，并且在 div 和 li 上都触发了悬停，因此事件仅在 div 上触发。我相信如果你用鼠标从底部进入这个结构，第三个 li 也不会显示效果。您通常不需要为用户操作分配事件处理程序，您只需在 DOM.

中加载元素后分配操作

为什么不能将鼠标悬停在第一项上

Why won't hover work over the first item

html

jquery

hover