html - 子元素悬停时为父元素赋予样式

Question

我有一个 ul(parent) 里面有另一个 ul。将鼠标悬停在父 ul 上时，我使用以下代码为子 ul 赋予样式

ul:hover>ul{

}

当悬停在父 ul 上时，这会为子 ul 提供样式。现在我想在子 ul 上悬停时给父 ul 样式？

有什么可行的方法吗？

Answer 1

到目前为止，CSS 中还没有类似的东西。CSS4 选择器的规范确实包含主题选择器，它可以让您像这样解决这个问题：

!ul > li:hover { ... }

如果你不能避免这个问题，现在你将不得不使用 Javascript。

一种 jQuery 方法：

$('ul').on({
    mouseenter: function() {
        $(this).parent('ul').addClass('ishovered');
    },
    mouseleave: function() {
        $(this).parent('ul').removeClass('ishovered');
    }
});

有了它，您可以使用.ishovered该类通过 CSS 设置您的父列表的样式。