jquery - 在 CSS 中选择子级的父级

Question

通过下面的代码，我希望能够将 CSS 样式应用到列表中的父 li class="parent" 项。但仅当用户将鼠标悬停在该特定父项的子 li class="child" 项上时。

据我所知，仅使用 CSS 是不可能的，但是有人知道潜在的 Javascript 解决方案(最好使用 jQuery，因为我们已经在我们的网站上使用了这个库)

谢谢!

<ul>
    <li class="parent"><a href="URL" >Main Link</a>
         <ul class="sub-menu">
             <li class="child"><a href="URL" >Link</a></li>
         </ul>
    </li>
</ul>

Answer 1

你没听错——CSS 不允许你在 DOM 树上向上遍历，只能向下遍历。例如，您可以选择 child ，但不能选择 parent 。

这是使用 jQuery 实现此目的的一种方法:

$("li.child").on("hover", function(){
    $(this)
        .closest("li.parent")
        .css({
            // styling here
        });
});

我们要做的就是选择带有 child 类的 li 元素。我们将 hover 事件绑定(bind)到它，并在该事件发生时触发一个函数。该函数找到具有 parent 类的子 li 最接近的父级，然后我们更改其 CSS。

更多关于on() here , closest() here和 css() here .

另请记住，对于早期版本的 jQuery，您可以使用 bind() 或 delegate()。

编辑:要在鼠标悬停和鼠标移出时更改:

$("li.child").on("mouseover mouseout", function(){
    $(this)
        .closest("li.parent")
        .toggleClass("myClass");
});

您在这里所做的就是在 CSS 中定义类 myClass。如果元素上尚不存在该类，则 toggleClass 添加该类，否则将其删除。这是不言自明的。这样，您可以节省一些字节并使用更首选和推荐的 jQuery。