我正在研究一种新的按钮样式,目前面临挑战:我的 <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;
}
最佳答案
悬停只需使用背景
;不是 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 ... .
关于CSS :hover Selector not working as expected with gifs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39403129/