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

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>

​