当我将鼠标悬停在一个不相关的元素上时，我试图让一个元素出现(或消失)。
目前我正在尝试使用列表和索引来做到这一点，这样当列表 1 中的第 n 项悬停时，列表 2 中的第 n 项就会发生变化。这将为许多对象提供通用解决方案，而不是将所有元素配对并为每个元素编写 jQuery 规则。我看过其他讨论，但似乎没有一个通用的解决方案。
下面是我试过的一些玩具代码。
我是 jQuery 的新手，所以感谢您的耐心等待。
<!doctype html>
<html>
<head>
<title>addClass demo</title>
<style>
.disappear { display: none }
</style>
<script src="jquery-1.10.2.min.js"></script>
</head>
<body>
<ul>
<li class = "one">Hello</li>
<li class = "one">and</li>
<li class = "one">Goodbye</li>
</ul>
<ul>
<li class = "two">Hello</li>
<li class = "two">and</li>
<li class = "two">Goodbye</li>
</ul>
<script>
$( "li one" ).on('mouseenter', function() {
var indx = $(this).eq();
$("li two").eq(indx).addClass("disapear");
});
$( "li" ).on('mouseleave', function() {
$(this).removeClass("disappear");
});
</script>
</body>
</html>
最佳答案
问题
- 你拼错了class。它的
disappear而不是disapear - 使用
$("li.one")而不是$( "li one")和$("li.two")而不是$( "li two") - 使用
index()代替eq() - 使用
.hover()，我推荐
代码
$("li.one").hover(function () {
var indx = $(this).index();
$("li.two").eq(indx).addClass("disappear");
}, function () {
var indx = $(this).index();
$("li.two").eq(indx).removeClass("disappear");
});
关于jquery - 悬停使用 jQuery 更改不相关元素的样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20661546/