如何更改css中元素的不透明度？

Question

我可能想办法在JS中做到这一点,但我想知道是否有一种方法在CSS中做到这一点.

我所拥有的是一个元素页面,精确的矩形和悬停我想改变opacity它们.目前我有这个:

.rectangle:hover{
    opacity:0.2;
}

效果很好.但我想要发生的是悬停我希望我悬停的那个有opacity完整(1.0)而其余的变为低opacity(0.5).像这样的东西:

.rectangle:hover{
   opacity:1.0
      rectangle:nohover{
         opacity:0.5;
      }
}

我只希望opacity在悬停时更改,因此设置矩形从一开始就具有不透明度0.5不是我需要的.

Answer 1

试试这个:

.rectangle {
    width: 50px; height: 50px; background: red; border: 1px solid blue; margin: 5px;
}
.container { float:left }
.container:hover .rectangle {
    opacity: 0.2
}
.container:hover .rectangle:hover {
    opacity: 0.5
}

<div class="container">
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
    <div class="rectangle"></div>
</div>