css - 使用 CSS 将鼠标悬停在另一个 div 上时更改多个 div 样式

Question

当我将鼠标悬停在#main 上时，#box 和#box2 的样式想要改变。但它不起作用。

html代码是

<div id="main">Main</div>
<div id="box">Text</div>
<div id="box1" >Text1</div>

CSS是

#main:hover + #box,#box1 {
    background-color: green;
}

score 3 · Accepted Answer

我建议如下：

#main:hover + #box,
#main:hover ~ #box1 {
    /* CSS */
}

最初，您遇到的问题是两个选择器：

#main:hover + #box,
#box1 {
    background-color: green;
}

第一个有效，不幸的是逗号分隔了整个选择器，它没有给出以逗号分隔的后代/兄弟姐妹列表。所以#box1总是背景色，而不仅仅是 on :hoverof #main。

我使用的组合器是相邻兄弟组合器 ( +) 和通用兄弟组合器 ( ~)，后者将影响#main具有给定id的任何后续兄弟box1。

第二条规则~ 可以通过使用多个（在本例中为两个）相邻兄弟组合子指定元素的确切序列来重写，以给出：

#main:hover + #box,
#main:hover + #box + #box1 {
    /* CSS */
}

但是随着时间的推移，这确实变得越来越脆弱，当 HTML 结构发生变化或在相关元素之间插入新元素时，维护变得更加困难。

参考：

score 1 · Accepted Answer

使用类和通用兄弟选择器（〜）可能更清洁：

HTML：

<div id="main">Main</div>
<div class="box">Text</div>
<div class="box" >Text1</div>

CSS：

#main:hover ~ .box {
    /* CSS */
}

2 回答 2