CODEWITHSUNDEEP
htmlcsscss-selectors
Forivin
Forivin

Reputation: 15498

CSS: Change all elements of class "x" when specific element is hovered

I have a div element and I want all elements that have a certain class to change when the div is hovered. I just couldn't get it to work. My code is only affecting the first element of the class and no I am not using the :first-child selector...

Here is my code: https://jsfiddle.net/f6q4080c/

#hoverme {
  width: 100px; height: 100px; 
  background: blue;
}
.other {
  width: 100px; height: 100px; margin-top: 5px;
  background: red; 
}

#hoverme:hover + .other {
  background: green;
}
<div id="container">
    <div id="hoverme" href="#">Hover me to turn the red ones green.</div>
    <div class="other">I want to turn green.</div>
    <div class="other">I want to turn green, too.</div>
</div>

Upvotes: 0

Views: 875

Answers (1)

Rion Williams
Rion Williams

Reputation: 76547

You can use the sibling selector ~ to target all of the siblings of a particular element, which would turn all of your .other elements "green" when your hoverme element was hovered :

/* This will turn all other classes green when hoverme is hovered */
#hoverme:hover ~ .other {
    background: green;
}

Example

enter image description here

#hoverme {
  width: 100px;
  height: 100px;
  background: blue;
}
.other {
  width: 100px;
  height: 100px;
  margin-top: 5px;
  background: red;
}
#hoverme:hover ~ .other {
  background: green;
}
<div id="container">
  <div id="hoverme" href="#">Hover me to turn the red ones green.</div>
  <div class="other">I want to turn green.</div>
  <div class="other">I want to turn green, too.</div>
</div>

Upvotes: 2

Related Questions