将鼠标悬停在“除外”上

为元素添加悬停状态非常简单。 让我们以不透明度变化为例

div {
   opacity: 1.0;
}
div:hover {
   opacity: 0.5;
}

但是，如果我们希望悬停状态应用于除实际悬停的元素以外的所有内容？（例如，其他相邻同级 div）

假设我们有以下基本 HTML

<section class="parent">
  <div></div>
  <div></div>
  <div></div>
</section>

当父元素处于悬停状态时，我们将当前 CSS 属性应用于父元素的所有子元素。

.parent:hover > div {
  opacity: 0.5;
}

然后，当父元素悬停且单个 div 悬停时，我们将不透明度恢复，从而达到我们期望的最终效果。

.parent:hover > div:hover {
  opacity: 1.0;
}

现实世界？

在 Mac 版 Twitter 应用的单个推文中使用类似的东西

演示

这个想法可以扩展到多个深度级别。 这是一个包含三个“列表”的示例。 所有列表项在其常规状态下的不透明度均为 100%，但当您将鼠标悬停在列表上时，当前悬停的列表的不透明度略高于其他列表，而当前悬停的列表项的不透明度为 100%。

查看演示   下载文件

是的，旧的你所知道的浏览器不支持除锚链接以外的任何元素的 :hover。 如果这是关键任务，请使用 JavaScript 检测鼠标进入事件并应用/删除类名。

2012 年 8 月更新： Michelle Eaton 使用此 JavaScript 完成了这项工作，如果您必须这样做

$("#all ul li").hover(function() { // Mouse over
  $(this).siblings().stop().fadeTo(300, 0.6);
  $(this).parent().siblings().stop().fadeTo(300, 0.3); 
}, function() { // Mouse out
  $(this).siblings().stop().fadeTo(300, 1);
  $(this).parent().siblings().stop().fadeTo(300, 1);
});