1

我有一个带有“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。

可能是什么错误？

4

1 回答 1

2

这不可能不起作用，它只是一个基本的:hover，所以它应该起作用，我唯一怀疑的是你的 CSS 必须有!important声明:hover或其他具有更高特异性的规则。

例如

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

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

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

演示

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

于 2013-07-31T18:06:19.580 回答