CSS：鼠标悬停时改变背景颜色

Question

我已经搜索了其他的问题，但我找到的解决方案都不起作用。

这里是详情：网页有一个.side_nav。其中有4个<li>元素。每个<li>元素包含一个小的img、一个h2和一个p。

当鼠标悬停在链接上时，我希望链接有一个较浅的颜色。我感觉我错过了一些小细节...

我正在使用DW:CC，并且有趣的是，在“实时”视图中，它不会显示<li>中的正常背景。然而，它在“实时”视图中显示:hover动作，但不在我尝试的任何浏览器中。

HTML：

<nav class="fluid side_nav">
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Estimates</h2>
        <p>Click here for an estimate</p>
        </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Repairs</h2>
        <p>Click here for an estimate</p>
    </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Maintenance</h2>
        <p>Click here for an estimate</p>
    </a></div>
    <div> <a href="#"> <img src="images/images.jpg" alt=""/>
        <h2>Specials</h2>
        <p>Click here for an estimate</p>
    </a></div>
</nav>

然后，CSS：

.side_nav {
    clear: both;
    margin-top: 10px;
    margin-bottom: 10px;
}
.side_nav img {
    height: 35px;
    padding-right: 15px;
    float: left;
}
.side_nav a {
    display: block;
    border: 1px solid #151515;
    margin-bottom: 8px;
    border-radius: 8px;
    padding-top: 8px;
    padding-right: 8px;
    padding-bottom: 8px;
    padding-left: 8px;
    -webkit-box-shadow: 4px 2px 6px #8E8E8E;
    box-shadow: 4px 2px 6px #8E8E8E;
    background-image: -webkit-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: -moz-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: -o-linear-gradient(0deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    background-image: linear-gradient(90deg,rgba(40,121,216,1.00) 0%,rgba(25,77,138,1.00) 99.48%);
    color: #FFFFFF;
}
.side_nav a:hover {
    background-color: #3374C2;
}

有什么提示吗？

- Geraux

---

你正在使用 background-image，它会覆盖在颜色之上。移除 background-image 就可以了。 - André Dion

谢谢你的提示。它起作用了。 - Geraux

Answer 1

您已经设置了background-image，这将覆盖颜色。请更改您的CSS，只使用background：

.side_nav a:hover {
    background: #3374C2;
}

FIDDLE

- SW4

---

啊，你的意思是我不能使用渐变颜色，然后在:hover时更改它？我会尝试一下。 - Geraux

你可以这样做，但是你必须更改背景图像或背景颜色属性中的任意一个（或者只更改通用背景）。要将渐变替换为另一个渐变，请在:hover上更改bg-img属性，并使用与a类别相似的值。 - SW4

你是一个冠军！谢谢！ - Geraux

Answer 2

请写：

.side_nav a:hover {
    background: #3374C2; //background instead of background-image
}

Fiddle here.

- codingrose