How to change the opacity of elements in css?

Question

I could probably figure out a way to do this in JS but im wondering if theres a way to do it in 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 :

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

Answer 1

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> 

Answer 2

Please try adding a wrapping div.

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

Answer 3

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;
}

Answer 4

edit: too slow :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

Answer 5

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