使悬停的元素变暗，但所有其他元素变亮答案

【问题标题】：Make the hovered element go darker, but all the other elements go lighter使悬停的元素变暗，但所有其他元素变亮
【发布时间】：2018-05-05 21:15:34
【问题描述】：

我不确定现在是否可以使用 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？

【问题讨论】：

标签： jquery css

【解决方案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>

【讨论】：

【解决方案2】：

不确定是否可以使用 CSS。但是可以很容易地用js和jquery的帮助来执行：

$(".box").hover(
	function() {
  	$(".box").each(function(){
    	$(this).css("opacity", 0.1);
    });
  	$(this).css("opacity", 0.9);
  },
  function() {
  	$(".box").each(function(){
    	$(this).css("opacity", 0.5);
    });
  }
);

.box {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box a">a</div>
<br>
<div class="box b">a</div>
<br>
<div class="box c">a</div>
<br>
<div class="box d">a</div>

【讨论】：

不要将 jQuery 用于简单的事情

【解决方案3】：

一个非常直接的.hover() 方法可以为您提供预期的行为。

代码片段演示：

jQuery('.box').hover(function(){
  jQuery(this).addClass('darken'); /* darken hovered element */
  jQuery('.box').not(jQuery(this)).addClass('lighten'); /* lighten all other elements */
}, function(){
  jQuery('.box').removeClass('darken lighten'); /* reset after hover out */
});

.box {
  background: #0072ff;
  width: 55px;
  height: 55px;
  display: inline-block;
  transition: .7s;
  opacity: .5;
}

.darken {
  opacity: .9;
}

.lighten {
  opacity: .1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>
<div class="box d"></div>

【讨论】：

【解决方案4】：

真的是js来实现的吗？！你只需要基本的 CSS 知识。 :)

.Container {
  cursor: default;
}

.Container:hover .Element:not(:hover) {
 opacity: 0.1;
}


.Element {
  width: 50px;
  height: 50px;
  background-color: rebeccapurple;
  display: inline-block;
  margin: 16px;
  cursor: pointer;
  opacity: 0.5;
  transition: all 200ms;
}


.Element:hover {
  opacity: 0.9;
}

<div class="Container">
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
  <div class="Element"></div>
</div>

【讨论】：

为什么是Really js to achieve this?! 评论？ OP 并不是说需要它，他只是在问它是否需要。
您的两种解决方案都不是理想的结果，atm。纯 CSS 无法做到这一点，而 CSS4 可能会做到这一点。
@VXp 我不明白这不会导致 OP 要求什么？
@VXp 我不知道您如何知道 OP 所需的解决方案是什么，无论如何您都可以有自己的意见，但他标记了我的答案，所以我猜它解决了 OP问题并满足他的要求
@CarstenLøvboAndersen 的回答正好解决了我的问题。