“元素：悬停的”颜色属性不起作用，可能是什么错误？

Question

我有一个类“navIcon”的元素，我给它一个颜色和背景颜色。 我希望当用户将鼠标悬停在此元素上时，它的颜色会变为黑色，以便检查和更改背景。 背景颜色变化成功，但颜色仍然与第一种颜色相同。这是我的风格：

.navIcon{
    width: 45px;
    height: 100%;
    text-align: center;
    font-size: 1.3em;
    font-weight: normal;
    float: left;
    padding-top: 8px;
    color: #f7f8f8;
}

.navIcon:hover{
    background-color: #f7f8f8;
    color: #3a3e3e; 
}

并且html在这里：

    <div id="userAuth" class="navIcon">
        <i class="icon-user"></i>
    </div>

我也使用Font Awesome。

可能是什么错误？

Answer 1

没有办法不行，它只是一个基本的:hover所以它应该有用，我唯一怀疑的是你的CSS必须!important声明:hover或另一个具有更高特异性的规则。

例如

div a {
    color: #f00;  /* Red */
}

div a:hover {
    color: #0f0; /* Green */
}

a:hover {
    color: #0ff;  /* Blue */
}

Demo

此处，div a:hover与简单a:hover相比更具体，因此，在您的情况下，您必须拥有一个具有更高特异性的选择器，或者您已声明!important。