CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mônica R.
Mônica R.

Reputation: 225

Hover 2 divs same time

Hello i have a column that is a button, and im trying to make it change the background color and his elements color, but im having some trouble in changing one of the elements that is a icon from awesome fonts, above i leave my code:

html: 

<a href="">
<div class="col-xs-4 bordered-right btn-dashboard">
<p class=""><strong>TITLE</strong></p>
     <h4><i  class="fa fa-wheelchair"></i></h4>
        <p><small>Subt Title</small></p>
</div>
</a>

CSS:

.col-xs-4.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.col-xs-4.btn-dashboard.fa-wheelchair:hover{
    color:white;
}

Upvotes: 0

Views: 813

Answers (4)

trashr0x
trashr0x

Reputation: 6565

You should remove .col-xs-4 and .fa-wheelchair from your CSS rules. What happens if you decide to use .col-xs-3 instead or another .fa-something-else icon? You'll have to update the CSS each and every time you make such changes. I would instead do:

.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.btn-dashboard:hover h4 {
  color: yellow;
}

If you only want to change the color of the font-awesome icon in the h4 you can do this instead: 

.btn-dashboard:hover h4 i { /* or i.fa */
    color: yellow;
}

Upvotes: 1

Richard Crosby
Richard Crosby

Reputation: 1

Your CSS selector chain is wrong (missing a space) - try -

.col-xs-4.btn-dashboard .fa.fa-wheelchair

Your CSS is looking for an element with ALL of those classes - as opposed to child elements of something with one class.

Upvotes: 0

Wa Kai
Wa Kai

Reputation: 466

You need a space between your CSS classes and you should put the hover to the div, so the icon is shown white, when die mouse is hovering over the div and not only over the icon (I assume this is your intention).

.col-xs-4.btn-dashboard:hover {
    background-color: #35b34c;
    color: white;
}

.col-xs-4.btn-dashboard:hover .fa-wheelchair{
    color:white;
}
<a href="">
<div class="col-xs-4 bordered-right btn-dashboard">
<p class=""><strong>TITLE</strong></p>
     <h4><i  class="fa fa-wheelchair">ICON</i></h4>
        <p><small>Subt Title</small></p>
</div>
</a>

Upvotes: 0

Nerdwood
Nerdwood

Reputation: 4022

Change .col-xs-4.btn-dashboard.fa-wheelchair:hover to .col-xs-4.btn-dashboard:hover .fa-wheelchair.

Upvotes: 1

Related Questions