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

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。

Answer 2

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