在 CSS 中选择子级的父级

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

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

Thanks!

<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>

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

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

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

我们要做的就是选择li元素与类child。我们绑定hover向其发送事件并在该事件发生时触发函数。该函数找到孩子最近的父母li与班级parent，然后我们更改它的 CSS。

More on on() here, closest() here, and css() here.

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

EDIT:让它在鼠标悬停时发生变化and鼠标移出：

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

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