css - 悬停时设置多个同级元素的样式

Question

我有这样的 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 规则来执行此操作吗？

Answer 1

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

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

参见fiddle .

替代解决方案

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

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

查看更新fiddle .