在悬停时为多个相同级别的元素设置样式答案

【问题标题】：Styling multiple same-level elements on hover在悬停时为多个相同级别的元素设置样式
【发布时间】：2011-09-04 18:07:21
【问题描述】：

我有这样的 HTML 标记：

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

当我将鼠标悬停在 .block 上时，我想为所有未悬停的 .block 元素设置样式。有没有办法只用 CSS 就可以做到这一点？

我可以使用类似于.block:hover .block:not(:hover) 的 CSS 规则来执行此操作吗？

【问题讨论】：

【解决方案1】：

#blocks:hover {
    background-color: blue;
}

.block:hover { 
    background-color: yellow;   
}

替代解决方案

.block:hover {
    background-color: blue;
}

#blocks:hover .block:not(:hover) { 
    background-color: yellow;   
}

查看更新的fiddle。

【讨论】：

【解决方案2】：

#blocks:hover .block {} 适用于所有非悬停元素，但悬停在整个 #blocks 元素和 #blocks .block:hover {} 上悬停元素应该有效。

【讨论】：