CSS：在懸停時更改背景顏色

Question

我搜索了其他問題，我發現的解決方案無效。

這是deets：網頁有一個.side_nav。 有4個要素。 每個都有一個小的img，一個h2和一個p。

我希望鏈接在懸停時顏色更淺。 我覺得我好像缺少一些小東西......

我正在使用DW：CC，有趣的是，它沒有顯示“實時”視圖中的正常背景。 但是，它確實顯示了：“實時”視圖中的懸停操作，而不是在我嘗試過的任何瀏覽器中。

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

有小費嗎？

Answer 1

您已經設置了background-image ，它取代了顏色。 將您的CSS更改為僅使用background ：

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

小提琴

Answer 2

寫：

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

在這里小提琴