我尝试对位于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";
});
});
如果有人可以告诉我出了什么问题，我将不胜感激！
您可以像这样减少代码，
$("#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";
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句