CODEWITHSUNDEEP
htmlcsshover
hanane
hanane

Reputation: 64

Customize link when I hover on a div

I have this code:

<div class="buttons-wrapper">
    <div class="comments-qty">
       <i class="fa fa-comments"></i>
    </div>
    <div class="link-to-post"><a href="#">
       <i class="fa fa-chevron-right"></i></a>
    </div>
</div>

When I hover the div "buttons-wrapper", I want to change the color of fa-chevron-right. I used this:

.buttons-wrapper:hover + .fa-chevron-right{
    background-color:green;
    color:white !important;
}

But it doesn't work.

Upvotes: 0

Views: 43

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

This

.buttons-wrapper:hover + .fa-chevron-right{
background-color:green;
color:white !important;
}

should be this

.buttons-wrapper:hover .fa-chevron-right{
background-color:green;
color:white !important;
}

Since .fa-chevron-right is not a sibling of .buttons-wrapper

Upvotes: 2

Aaron
Aaron

Reputation: 10430

you need to remove the plus symbol.

.buttons-wrapper:hover .fa-chevron-right{
background-color:green;
color:white !important;

}

Upvotes: 1

Akshay
Akshay

Reputation: 14348

Try it like this as + is used for next sibling selector to select child element use .buttons-wrapper:hover .fa-chevron-right{

.buttons-wrapper:hover  .fa-chevron-right{
background-color:green;
color:white !important;
}
<div class="buttons-wrapper">
    <div class="comments-qty">
       <i class="fa fa-comments"></i>
    </div>
    <div class="link-to-post"><a href="#">
       <i class="fa fa-chevron-right">adsadsd</i></a>
    </div>
</div>

Upvotes: 2

Related Questions