css - 悬停嵌套的两个元素

Question

通过使用纯 CSS（无 JavaScript），我怎样才能使它只有当我同时悬停.a 和 .b 时，.a和 .b 都会变红？（这可以解释为“当我悬停 .b 时，.a 变红”）

HTML：

<div class="a">AAAAA<div class="b">BBBBB</div></div>

一些 CSS 绝望的失败尝试：

.b:hover .a {color: red;}
.a.b:hover {color: red;}
.b:hover + .a {color: red;}
.b:hover ~ .a {color: red;}
.b:hover < .a {color: red;}

但是感觉任何可以选择父元素的东西都行不通。

score 0 · Accepted Answer

<不存在，+相邻~的兄弟选择器也不存在，但仅适用于后续元素。

基本上，你不能用纯 CSS 做到这一点，因为它不存在像父选择器这样的东西，你需要指定是否.b悬停样式也是父元素。

score 0 · Accepted Answer

将此样式添加到您的页面

<style type="text/css">
    .a:hover{
   background-color:red;
}
    </style>

希望这对你有用。

2 回答 2