On hover change all other divs inside container

Question

I have 8 nested divs inside a container div. I'd like it so when you hover over a div the opacity changes on all the other divs within the same container. I'm sure this can be done purely using css (if not i'm happy to do using jQuery). I've tried using the sibling of the container ~ and it's kind of working but not 100% correct.

Here's my HTML:

<div class="container">
    <div class="something"><div class="element">Panel 1</div></div>
    <div class="something"><div class="element">Panel 2</div></div>
    <div class="something"><div class="element">Panel 3</div></div>
    <div class="something"><div class="element">Panel 4</div></div>
    <div class="something"><div class="element">Panel 5</div></div>
    <div class="something"><div class="element">Panel 6</div></div>
    <div class="something"><div class="element">Panel 7</div></div>
    <div class="something"><div class="element">Panel 8</div></div>
</div>

and here's my CSS:

.something:hover ~ div {
  opacity: 0.4;
}

Here's a working jsFiddle: https://jsfiddle.net/kxz4fjys/

You can see on the jsFiddle it's kind of working but not exactly right. Any ideas?

https://stackoverflow.com/questions/1817792/is-there-a-previous-sibling-selector — Nenad Vracar, Oct 02 '19 at 17:58
@NenadVracar i think in this particular case this CAN be done only in CSS. - see my answer. I first also thought this could only be done with some JS but i was wrong apparently. — DigitalJedi, Oct 02 '19 at 18:36

DigitalJedi · Answer 1 · 2019-10-03T19:31:37.707

EDIT: IT DOES WORK WITH CSS ONLY!

CSS solution below + old jQuery Solution As comment inside the snippet!

We can basically give all the child elements of the parent container some opacity if we hover the parent:

.container:hover>* {
  opacity: 0.5;
}

AND aswell give the particular child we hover inside the container another hover property to make it look like we only give some opacity to all other children, but not the one we actually hover.

.container:hover>* {
  opacity: 0.5;
}

Heres the full snippet:

/*$(".something").hover(
  function() { 
  $(this).siblings().css( "opacity", "0.5" );
  }
);

$(".container").mouseout(
function(){
  $(this).children().css( "opacity", "1" );
 
});
*/

.something {
  display: inline-block;
  margin: 20px;
  width: 100px;
  height: 100px;
}

.element {
  width: 100%;
  height: 100%;
  display: inline-block;
  background: #DDDDDD;
  text-align: center;
  opacity: 1;
}
.container:hover .something {
  opacity: 0.4;
}
.container:hover .something:hover{
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="something">
    <div class="element">Panel 1</div>
  </div>
  <div class="something">
    <div class="element">Panel 2</div>
  </div>
  <div class="something">
    <div class="element">Panel 3</div>
  </div>
  <div class="something">
    <div class="element">Panel 4</div>
  </div>
  <div class="something">
    <div class="element">Panel 5</div>
  </div>
  <div class="something">
    <div class="element">Panel 6</div>
  </div>
  <div class="something">
    <div class="element">Panel 7</div>
  </div>
  <div class="something">
    <div class="element">Panel 8</div>
  </div>
</div>

JS Fiddle: https://jsfiddle.net/5oe8tdug/

This works only because you aren't using columns like the OP. In his case, he ends up with (a weird behavior](https://jsfiddle.net/x5pormaf/). — Ibu, Oct 02 '19 at 18:43
@Ibu Im using the EXACT same HTML as OP, so your statement *cannot* be true. — DigitalJedi, Oct 02 '19 at 18:45
Cheers Ibu thats the pure css approach i was looking for. Thanks for taking time to look DigitalJedi much appreciated but like Ibu mentioned your approach is a bit buggy when i start adding any space between the nested child divs. — alexkodr, Oct 02 '19 at 18:50
@Ibu i guess DigitalJedi never looked at the jsFiddle link and i forgot to pull through all the css. My bad. — alexkodr, Oct 02 '19 at 18:51
@alexgomy I see guys...sorry bout that. When you are between the squares, it still seems to "hover". This "bug" is not actually a bug, but more what happens when width height and margin are defined on the child element. I adjusted my answer and I have forked a new fiddle that eliminates this problem: https://jsfiddle.net/5oe8tdug/ - glad I could help — DigitalJedi, Oct 03 '19 at 19:30

On hover change all other divs inside container

1 Answers1