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

Question

我尝试在位于div中的未排序列表上使用jQuery hover()方法.当鼠标悬停在其中一个列表项上时,没有任何反应,但当将其移动到第二个列表项时,反应按编程(下划线).如果我然后回到第一个项目,它也会按照编程的方式做出反应,那么为什么第一次这样做呢？如果我使用div而不是li,或者我在jQuery方法中添加了preventDefault(),则会出现同样的问题.我已经看到问题上的解决方案悬停不适用于列表中的项目,但它们也不起作用.

这是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";
});

小提琴