風格：之前在懸停

Question

我有一個按鈕：

.button{ 
background-color:red; 
color:#fff; 
width:70px; 
} 
.button:before{ 
min-width:0px; 
content: attr(data-number); 
} 

HTML：

<div class="button" data-number="5"><a href="javascript:;">button</a></div> 

我的問題是，我想要的內容數量是黑色的，當用戶放鼠標懸停button文本。 我嘗試：

.button:hover .button:before{ 
color:#000; 
} 

但它不工作。

http://jsfiddle.net/733ogk3f/

Answer 1

您需要在同一時間，指定:hover和:before：

.button:hover:before { 
    color:#000; 
} 

這樣的CSS選擇器.button:hover .button:before指向.button內部.button。但這不是你的情況。

Answer 2

嘗試：

.button:hover::before{ 
    color:#000; 
} 

您需要同時選擇:hover和::before