html - Change the CSS on hover -
i have following html code:
<div class="counters2"> <div class="one_fourth"> item 1 <h4> 99$ </h4> </div> <div class="one_fourth last"> item 2 <h4> 139$ </h4> </div> </div>
and following css code:
.counters2 h4 { font-size: 18px; color: #999; font-weight: 400; margin: 20px 0px 0px 0px; } .counters2 .one_fourth { background-color: #f3f3f3; padding: 30px 0px; border-radius: 4px; font-family: 'open sans', sans-serif; font-size: 35px; color: #393939; font-weight: bold; }
how during hover can change :
- text color white (#fff)
- background color green (#9eca45)
problem actual code price between <h4>
tags change color not change white until make hover on it. how can changed that? tried:
.counters2 h4.active, .counters2 h4:hover { font-size: 18px; color: #fff; font-weight: 400; margin: 20px 0px 0px 0px; } .counters2 .one_fourth.active, .counters2 .one_fourth:hover { background-color: #9eca45; padding: 30px 0px; border-radius: 4px; font-family: 'open sans', sans-serif; font-size: 35px; color: #fff; font-weight: bold; }
you need remove color
in h4
, or add specific rule override color: #999;
, like:
.counters2 .one_fourth:hover h4 { color: #fff; }
Comments
Post a Comment