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

I could probably figure out a way to do this in JS but im wondering if theres a way to do it in CSS.

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

What i have is a page of elements, rectangles to be exact and on hover I want to change the opacity of them. Currently i have this :

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

.rectangle:hover{
    opacity:0.2;
}

Works great. But what i want to happen is on hover I want the one i hover over to have opacity full (1.0) and the rest to change to lower opacity (0.5). Something like this :

效果很好。但我想要发生的是悬停我希望我悬停在其上的那个具有不透明度(1.0)而其余部分更改为较低的不透明度(0.5)。像这样的东西:

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

I only want the opacity to change when on hover so setting the rectangles to have opacity 0.5 from the start is not what i need.

我只想在悬停时改变不透明度,因此设置矩形从一开始就具有不透明度0.5不是我需要的。

5 个解决方案

#1

You can do this if all the rectangle share a common parent.

如果所有矩形共享一个共同的父级,则可以执行此操作。

#parent .rectangle {
    opacity: 0.2;
} 

#parent:hover .rectangle {
    opacity: 0.5;
}

#parent:hover .rectangle:hover {
    opacity: 1;
}

#2

Try this:

.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>

#3

Please try adding a wrapping div.

请尝试添加包装div。

.wrap:hover .rectangle{
  opacity:0.5;
}
.wrap:hover .rectangle:hover{
  opacity: 1;
}

#4

edit: too slow :p

编辑:太慢了:p

html

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

css

.rectangle {
  opacity:0.7;
}
.container:hover .rectangle {
  opacity:0.5;
}
.container:hover .rectangle:hover {
  opacity:1.0;
}

this should do the trick, as long as all rectangles have the same parent, and there's no other objects in the container

只要所有矩形都具有相同的父级,并且容器中没有其他对象,这应该可以解决问题

#5

.rectangle{
   opacity : 0.5;
 }
.rectangle:hover{
   opacity : 1;
}

#1