在父＆gt;子悬停css上管理事件

Question

我有这个HTML代码

<article>
    <div class="a">
        <div class="a_b"></div>
    </div>
    <div class="c"></div>
</article>

我需要对div .a_b hover上的div .c做一些更改 我可以使用scss（或本机css），而不使用任何JavaScript代码吗？

Answer 1

您可以部署:hover伪类（以及其他伪类，如:focus，:checked，:target等）来修改样式：

• 元素本身
• 该元素的后代
• 该元素的后续兄弟。

在此设置中：

<article>
    <div class="a">
        <div class="a_b"></div>
    </div>
    <div class="c"></div>
</article>

您可以将伪元素应用于.a，它可以修改.a（自身），.a_b（其子）或.c（其兄弟）上的样式）。

但是.a_b或.c上的伪元素不能修改除元素本身之外的任何元素的样式 - 因为这两个元素都没有任何子元素或任何后续兄弟元素。

解决方案：

在您的结构中，添加.a_b作为.a的后续兄弟：

<article>
    <div class="a">
    </div>
    <div class="a_b"></div>
    <div class="c"></div>
</article>

然后使用CSS定位重新定位.a_b，以便在视觉上，它看起来在.a内（即使它实际上是.a的兄弟元素，而不是.a）的子元素。