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

Question

我尝试在位于 div 中的未排序列表上使用 jQuery hover() 方法。当将鼠标移到其中一个列表项上时没有任何反应，但是当将其移到第二个列表项上时， react 是程序化的(下划线)。如果我然后回到第一个项目，它也会按照程序使用react，那么为什么它第一次不这样做呢？如果我使用 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";
    });
}); 

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

这是网址: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