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用于悬停;不是background-color，如下面的代码段所示：

.button_depression:hover {
    background: #959595;
}

摘要：

背景 CSS property是设置以下一项或多项的值的简写：background-clip，background-color，background-image，background-origin，background-position，background -repeat，background-size和background-attachment。

在没有速记的情况下工作时，background-image属性会取代background-color，因此，单独设置background-color而不放弃它（background-image）将导致其优先。< / p>

换句话说，background-image: none;与background-color: #959595;结合使用即可。 （请参阅下面的代码段）

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

（background-image: unset;效果也不错，但无法判断所有浏览器是否支持）

请注意，您可以使用背景简写，如上所述，使用 background: #959595; （我更喜欢：简单，简洁，更简洁），同样的结果）。

更多详情here ... 。

Answer 2

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

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

CSS：悬停选择器与gifs无法正常工作

2 个答案:

摘要：