jquery - 使悬停元素变暗，但所有其他元素变亮

Question

我不确定现在是否可以使用 CSS，但是当我将鼠标悬停在一个元素上时，我希望它变暗(不透明度为 0.9)，而所有其他元素变亮(不透明度为 0.1)。当没有元素被悬停时，我希望所有元素的不透明度都为 0.5。标记看起来像这样:

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

盒子的布局无关紧要。

也许需要 JS/jQuery？

Answer 1

你不需要 jquery，它可以用 css 来完成。试试下面的代码，它会让你知道如何制作你想要的东西。

.box {
  background-color: blue;
  height: 50px;
  width: 50px;
  margin: 10px;
  opacity: 0.6;
}

.wrap:hover .box:hover {
  opacity: 0.9;
}

.wrap:hover .box:not(:hover) {
  opacity: 0.4;
}

<div class="wrap">
  <div class="box a"></div>
  <div class="box b"></div>
  <div class="box c"></div>
  <div class="box d"></div>
</div>