Sibling combinator used for changing CSS once hovering div not working in all instances

Question

I have a problem regarding a hover function programmed to change the width of three divs once one of these divs is hovered. This means that if you hover the first div, the second and third div also change in width, but all with different width values. Also, once you hover the second div, the first and third div should also change in width. This should work the same for the third div.
The problem starts once you hover the second div, because then the second and third div only change in width, but not the first div. The first div then doesn't change in width anymore. This problem continues once you hover the third div, then both the first and second div aren't changing in width, only the third div does.
There is however, no problem if you hover the first div, then all the other divs change to the correct width.

For this I used the sibling combinator ( ~ ) in CSS. For example, once you hover div 1 the style of div 2 is changed using this selector: .tile-1:hover ~ .tile-2.

Please see my code on CodePen or below:

<div class="tile tile-1"></div>
<div class="tile tile-2"></div>
<div class="tile tile-3"></div>

<style>
/* simple styling */
.tile {
  background-color: #000;
  width: 200px;
  height: 100px;
  border-style: solid;
  border-color: white;
}

/* tile 1 */
.tile-1:hover {
  width: 250px;
}

.tile-1:hover ~ .tile-2 {
  width: 300px;
}

.tile-1:hover ~ .tile-3 {
  width: 350px;
}

/* tile 2 */
.tile-2:hover ~ .tile-1 {
  width: 350px;
}

.tile-2:hover {
  width: 300px;
}

.tile-2:hover ~ .tile-3 {
  width: 250px;
}

/* tile 3 */
.tile-3:hover ~ .tile-1 {
  width: 300px;
}

.tile-3:hover ~ .tile-2 {
  width: 250px;
}

.tile-3:hover {
  width: 350px;
}
</style>

I hope anyone can help by having the selectors .tile-2:hover ~ .tile-1, .tile-3:hover ~ .tile-1 and .tile-3:hover ~ .tile-2 work, since on the current code their width value isn't applied.

score 0 · Answer 1 · answered Jul 18 '18 at 15:56

From W3School

The element1 ~ element2 selector matches occurrences of element2 that are preceded by element1.

Example :

div {
  width: 100px;
  height: 50px;
  border: 1px solid;
  margin-bottom:5px;
}

p~div {
  background: red;
}

<div></div>
<div></div>
<div></div>
<p>P Element to use for p ~ div</p>
<div></div>
<div></div>
<div></div>

As you can see it only selects the elements that comes after not all around, you may wanna rethink your method of achieving whatever that you want.

Sensoray · Answer 2 · 2018-07-18T16:04:56.973

The cascading in css means that an element can only affect the one directly beside or below it. But it only works in one direction, down. The sibling selector selects the ones on the same level, that are listed after it. So 2 can affect 2 and 3, but not 1.

A way around that would be using flex.

.gallery-content{
  overflow:hidden;
  margin-top: 45px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.gallery-content .col{  
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
  min-height: 250px;
  background-size: cover;
  background-position: center center;
  transition: .3s;
  background-image:url(https://www.fillmurray.com/300/200);
}
.gallery-content .col:hover{
  transition: .5s;  
  flex-grow: 1.5;
  cursor: pointer;
}

<div class="gallery-content">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Sibling combinator used for changing CSS once hovering div not working in all instances

2 Answers2