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?

Answer 1

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/