更改懸停

Question

的CSS我有以下的HTML代碼：

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

下面CSS代碼：

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

如何懸停時，我可以改變：

• 文本顏色爲白色（#fff）
• 背景顏色爲綠色（＃9eca45）

---

問題，我實際的代碼是<h4>標籤之間的價格改變顏色不更改爲白色，直到我做一個懸停就可以了。我該如何改變它？我的嘗試：

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

Answer 1

您需要在h4刪除color，或添加特定規則覆蓋color: #999;，如：

.counters2 .one_fourth:hover h4 { 
    color: #fff; 
} 

FIDDLE