Css 如何将鼠标悬停在子元素上而不是父元素上

是否可以在悬停时仅设置子元素的样式，而不设置父元素的样式

考虑这样的结构：

<div class="foo">
    <div class="bar"> </div>
    more elements
</div>

当指针悬停在

.bar

上时，我想要实现的是仅在

.bar

上触发悬停效果，而不是在

.foo

元素上触发悬停效果。当指针悬停在

.foo

上而在

.bar

之外时，我只想影响

.foo

。

---

这可能吗？

是的，可能是因为BAR是foo的一部分，所以我怀疑您是否可以将它们分离（可能使用JS和SUTF）

.foo:hover{
    //some style
}

.bar:hover{
    //some other style
}