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

Question

我有一个ul（父母）里面有另一个ul。当我将鼠标悬停在父ul

上时，我使用以下代码为子ul提供了样式

ul:hover>ul{

}

当将鼠标悬停在父级ul上时，这会给孩子提供样式。现在我想在孩子ul？

上悬停时给父级ul赋予样式

有没有可行的方法？

Answer 1

截至目前，CSS中没有类似内容。 CSS4 Selectors的规范确实包含了主题选择器，它可以让你解决这个问题：

!ul > li:hover { ... }

现在，如果无法避免此问题，则必须使用Javascript。

jQuery方法：

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

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