Question

我想设置一行包含四列的样式，以将不透明度一旦悬停在0.5即可，但是实际上悬停的列仍应具有1的不透明度，因此基本上每个col都可以设置样式，但悬停的却可以。

我尝试了类似的东西：

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>

如何为除悬停元素外的所有相同类型的元素设置样式？

1 个答案: