Question

我尝试在位于div中的未排序列表中使用jQuery hover（）方法。当鼠标悬停在其中一个列表项上时，没有任何反应，但是当将其移动到第二个列表项时，反应按照编程（下划线）进行。如果我然后回到第一个项目，它也会按照程序进行反应，那么为什么第一次没有这样做呢？如果我使用div而不是li，或者我在jQuery方法中添加了preventDefault（），则会出现同样的问题。我已经在问题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";
    });
});

如果有人能告诉我出了什么问题，我将非常感激！

以下是网址：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;
}

至于你问题的答案，你在主悬停绑定中有悬停绑定。不确定，但这会产生某种冲突。如果你想这样做，那就把所有的＆＃39; li＆＃39;徘徊在顶部，而不是在主要悬停功能内。

Answer 3

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

为什么不在第一项上空盘旋

3 个答案: