html - 为类的所有实例设置样式，但在 CSS 中选择的除外

Question

给定一个具有类 .element 的多个实例的应用程序，我想要这样的东西:

.element:hover rest {
    opacity: 0.5
}

其中“rest”指的是 .element 的所有其他实例，但悬停的实例除外。上述代码所需的功能是 .element 的所有实例都变得不透明，而悬停的元素仍然没有样式。

不使用 javascript 是否可行？

Answer 1

这完全取决于您的 HTML 的结构。

如果元素共享一个可用作不透明度更改触发器的共同祖先，则您可能会获得您正在寻找的结果。

.parent:hover .child {
  opacity: 0.5;
}

.parent .child:hover {
  opacity: 1;
}

<div class="parent">
  <div class="child">
    Lorem ipsum
  </div>
  <div class="child">
    Lorem ipsum
  </div>
  <div class="child">
    Lorem ipsum
  </div>
</div>