样式：悬停前[重复]答案

【问题标题】：Style :before on hover [duplicate]样式：悬停前[重复]
【发布时间】：2016-01-24 14:18:28
【问题描述】：

我有一个按钮：

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

但它不起作用。

【问题讨论】：

标签： css

【解决方案1】：

您需要同时指定:hover和:before：

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

.button:hover .button:before 这样的 CSS 选择器在 .button 中指向 .button。但这不是你的情况。

【讨论】：

【解决方案2】：

试试：

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

您需要同时选择:hover 和::before

【讨论】：