我有一组 div 都具有相同的类（如果可以使这更容易，它们不必具有相同的类）。理想情况下，我想要的是，当用户将鼠标悬停在这些 div 之一上时，其他 div（每个都有背景图像）全部变成灰色，以将焦点放在当前悬停的 div 上。如果是悬停在上面的 div 发生了变化，我会没事的，但我真的不知道如何解决这个问题。某种兄弟选择器？我更愿意只使用 css，并且如果解决方案不向后兼容，我会很高兴。
到目前为止，这是我的代码。提前致谢！
.box:hover (SELECT ALL OTHER .BOX) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%); }
编辑：我意识到我可以给每个框一个不同的类，然后说当框 1 悬停在上方时，框 2,3,4 等变为灰色，并为每个框执行此操作..但这似乎有很多代码简单的。
仅当您的元素相邻（例如导航栏）时，以下解决方案才有效。也许这不是你的情况，但它可以帮助其他人。必须说的是跨浏览器的CSS2。
包裹你的<div>容器内：
<div class="container">
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
</div>
并用它来控制:hover
.target {
background-color: #444;
}
.container {
float: left;
}
.container:hover .target {
background: #bbb;
}
.container .target:hover {
background: #444;
}
它正在工作here http://jsfiddle.net/simbirsk/4DBQk/
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
