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; } 

fiddle


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

Kivy: Swiping (Carousel & ScreenManager) -