CSS :hover Selector not working as expected with gifs

Question

我正在研究一种新的按钮样式，目前面临挑战:我的 <button> CSS :hover选择器未按预期运行。

所有让它发挥作用的尝试都被证明是徒劳的。

我怎样才能有效地实现这一点？

下面是我的代码:

.button_depression {
    background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif)
no-repeat;
    border: 0;
    color: #ffffff;
    padding: 5px 35px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
    border-radius: 5px;
    font-family: Times New Roman;
    transition-duration: 0.5s;
}

.button_depression:hover {
    background-color: #959595;
}

Answer 1

悬停只需使用背景；不是 background-color，如下面的代码片段所示:

.button_depression:hover {
    background: #959595;
}

简要总结:

背景 CSS property是设置以下一项或多项值的简写:背景剪辑、背景颜色、背景图像、背景原点、背景位置、背景重复、背景大小和背景附件。

在没有简写的情况下工作时，background-image 属性会取代 background-color，因此，单独设置 background-color 而不会放弃它 (background-image) 将导致它的优先级。

换句话说，background-image: none; 与 background-color: #959595; 结合使用。 (引用下面的片段)

.button_depression:hover {
    background-color: #959595;
    background-image: none;
}

(background-image: unset; 效果也很好，但无法判断是否所有浏览器都支持)

请注意，您可以使用 background 简写来实现相同的效果，就像上面那样，使用 background: #959595;(其中我更喜欢:简单、不那么冗长、结果相同)。

更多详情 here ... .