CSS:悬停选择器在GIF中未按预期工作

我正在开发一种新的按钮样式，目前面临一个挑战：我的

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

---

由于背景图像的原因，无法看到按钮悬停更改背景颜色。您可以在悬停时将按钮图像设置为“无”，然后更改颜色。这可能是你想要的。或者，您可以将背景设置为所需的背景色。您的偏好是如何完成此任务

.button_depression {
    background: url(http://67.media.tumblr.com/tumblr_m9atx55D6F1qd1e6no1_400.gif) no-repeat;
    border: 0px;
    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: None;
    background-color: #959595;
}

---

只需使用

background

进行悬停；不是背景色，如下面的代码片段所示：

.button_depression:hover {
    background: #959595;
}

小结： background是设置以下一个或多个值的缩写：背景剪辑、背景颜色、背景图像、背景原点、背景位置、背景重复、背景大小和背景附件

如果不使用速记，则

背景图像

属性将取代

背景颜色

，因此，单独设置

背景颜色

，而不放弃它（

背景图像

）将导致其优先级

换句话说，

背景图像：无

与

背景色结合使用：#9595将起作用。（请参阅下面的代码片段）

（
背景图像：unset；
也可以正常工作，但无法判断是否所有浏览器都支持它）

请注意，您也可以通过使用背景速记（如上所述）和
background:#9595（我更喜欢：简单，不太冗长，结果相同）

更多详细信息。
是否
None
是有效的属性值？是的。说也奇怪。很少使用，并且有更好的方法来解决此用户的问题，但是他可以使用None来解决问题，而无需重写大量代码。我认为它是
None
，小写
n
。哦，我明白你的意思了。我在回答问题之前测试了一下，结果“没有”似乎效果很好。可能CSS解释器允许我们使用“无”。因为
背景图像
取代
背景颜色
，因此，单独设置
背景颜色
，而不放弃它（
背景图像
）将导致其优先级。换句话说，
背景图像：无
（
background image:unset；
也能正常工作，但无法判断是否受所有浏览器支持）与
背景色结合使用：#9595将起作用。通过
background:#9595（我更喜欢：简单，不太冗长，结果相同）。更多细节你应该在你的答案中加入。刚刚更新了我的答案，并按照建议提供了详细的解释和参考。谢谢你的帮助！Idk为什么我会被否决，但我感谢你花时间回答！我解释得再好不过了。背景色取代背景色，因此，背景色显示在所用背景图像的“后面”。对吗？
.button_depression:hover {
    background-color: #959595;
    background-image: none;
}