About design and nearby

How to change another element styling on a CSS hover event

Posted: February 21st, 2018 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , , | No Comments »

Pretty simple question, isn’t it?
What I want to do is affect the properties of one element when another element is hovered:

Hover over screen

My HTML looks as below:

  1. <div class="my-container card card-01">
  2.    <img class="card-img-top" src="images/swd-image.jpg" alt="test image">
  3.    <div class="card-body">        
  4.       <button class="btn badge-box" type="button"><i class="fa"></i></button>          
  5.       <h2 class="card-text">Hover!</h2>        
  6.    </div>
  7. </div>

And a ‘button’ element should change its color on hover on ‘div class=”card”‘ element.

This case all work is done by

  1. .my-container button i{
  2.     background-color:#538feb;
  3.     opacity: .65;
  4. }
  5. .my-container button i:hover{
  6.     background-color:#4485ea;
  7.     opacity: 1;
  8. }

In other words,
if the button is somewhere inside the container:
.my-container:hover button i {background-color:blue;}

If the button is directly inside the container:
.my-container:hover > button i {background-color:blue;}

If the button is next to (after containers closing tag) the container:
.my-container:hover + button i {background-color:blue;}

If the button is somewhere inside the container:
.my-container:hover button i {background-color:blue;}

If the button is a sibling of the container:
.my-container:hover ~ button i {background-color:blue;}

*You can find more info on CSS Selector reference.

Check standalone example: How to change another element styling on a CSS hover event >>

Share Button

Check Related Posts:


Leave a Reply


  • − 1 = one

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now