Question

假设我有以下

<ul>
<li>Item 1</li>
<li>Item 2
   <ul>
    <li>Sub Item</li>
   </ul>
</li>
<li>Item 3</li>
</ul>

此列表是由其他一些代码自动生成的（因此添加独占id / class'是不可能的。假设我有一些jquery代码，声明如果我将鼠标悬停在li上，它会获得背景颜色。但是，如果我鼠标悬停在“子项目”列表项目上，“项目2”也会突出显示。如何设置它以便如果用户将鼠标放在“子项目”上，它只会在其上放置背景颜色而不是“项目” 2“还有吗？

我也忘了提到我已经有了类似$（“li”）的东西。在页面上已经有了... doSomething ...

Answer 1

首先你需要一些CSS，一个悬停类和<li>元素的背景，所以父母的背景不会出现在孩子身上（因为否则他们有透明的背景，所以无论如何父母将显示），像这样：

.hover { background: #ddd; }
li { background: #fff; }

然后您可以使用mouseover和mouseout（不 mouseenter和mouseleave，例如.hover()使用），如下所示：

$('li').mouseover(function(e){
    $(this).addClass("hover").parents().removeClass("hover");
    e.stopPropagation();
}).mouseout(function(){
    $(this).removeClass("hover");
});

You can see a working demo here。这使用了.mouseover()和.mouseout()（因此在进入/离开子元素时会触发，mouseenter / mouseleave具体不会。在悬停时，我们将hover类应用于当前<li>，并从可能拥有它的任何父级中删除该类。我们也阻止事件与event.stopPropagation()一起冒泡，所以同样的事情不会发生在这个元素的父母身上......只需在演示中对此进行评论，看看这会如何影响事情：）

Answer 2

尝试$（'ul li li'）作为你的选择器。 IE

ul li li:hover {background:#00F;}

修改

对于JQuery解决方案，它是相同的选择器。 IE

`$（'ul li li'）。css（'background'，'＃00F'）;

Javascript / Jquery Tree Traversal问题

2 个答案: