Image by Wojciech Krakowiak from Pixabay 
Image by Wojciech Krakowiak from Pixabay 

 

How to change style of element "a" when element "b" is hovered? Actually there is couple of solutions for this problem using only CSS. In this text we will give you idea how to do it.

  • Hover element #a to change background colour of element #b:
    - if element #b comes after element #a in this example we can use + operator:
     #a:hover + #b{}
  • Hover element #b to change background colour for element #a:
     In this example we will use a little trick, actually we will hover over parent element but force the background colour of element #a (on hover) to be default colour

 

HTML

                    <div id="wrapper">
    
    <div id="a"> el A </div>
    <div id="b"> el B</div>
    
  </div>

CSS

                    
#wrapper{
  display:inline-block;
}
#a,#b{
  width:50px;
  height:50px;
  padding:5px;
  color: white;
  cursor:pointer;
  float: left;
}

#a{
  background-color:red;
}

#b{
  background-color:blue;
}

#a:hover + #b{
  background-color:green;
}

#wrapper:hover #a{
  background-color:orange;
}

#a:hover{
  background-color:red !important;
}

 

Here is the example on codepen:

hover element a - change element b

 

Another interesting example, would be using ::before and ::after selectors: