除了悬停的元素，如何设置相同类型的所有元素？

Question

我想设置一行包含四列的样式，以便将悬停后的不透明度更改为 0.5，但实际悬停的列的不透明度仍应为 1，因此基本上每个列都设置了样式，但悬停的列。

我试过这样的东西：

div.airsuspension-submenu div.row div:hover .nav-highlight:not(div.airsuspension-submenu div.row div .nav-highlight:hover) {
    opacity: 0.5;
}

所有悬停的div.row div 元素的不透明度应为 0.5，但悬停的 div.row div .nav-highlight 的不透明度仍应为 1

Answer 1

不使用 javascript 的最佳选择是将背景颜色应用于父容器，然后降低父容器悬停时对所有子容器的不透明度，然后增加悬停的特定元素的不透明度。

.d-flex {
  display: flex;
  justify-content: space-around;
}
.d-flex:hover > div {
  opacity: 0.5;
}
.d-flex:hover > div:hover {
  opacity: 1;
}

.item {
  background: red;
  flex-grow: 1;
  padding: 1rem;
  transition: opacity 1s ease-in-out;
  color: white;
}

<div class="d-flex">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
</div>