使悬停元素变得更暗,但所有其他元素变得更亮

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>