0

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.

TylerH
  • 20,799
  • 66
  • 75
  • 101
hanane
  • 64
  • 1
  • 9
  • @AleshaOleg That question uses jQuery to show/hide elements; it's not a duplicate, though one surely exists elsewhere. – TylerH Sep 01 '15 at 15:10
  • 2
    @TylerH ok, ok - sorry. http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered – AleshaOleg Sep 01 '15 at 15:12
  • @AleshaOleg that question didn't help me , in fact i used the response of that question and didn't work , this is why i posted an other question. thanks – hanane Sep 01 '15 at 15:18

3 Answers3

2

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>
Akshay
  • 14,138
  • 5
  • 46
  • 70
2

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

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
1

you need to remove the plus symbol.

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

}
Aaron
  • 10,187
  • 3
  • 23
  • 39