悬停时按钮背景不变

Posted 2023-05-08

【中文标题】悬停时按钮背景不变

【英文标题】：Button background not changing on hover

【发布时间】：2014-04-15 05:10:10

【问题描述】：

我已经使用常用方法创建了一个按钮作为链接，但是，我遇到了一个奇怪的问题，即背景颜色在悬停时没有改变，什么时候应该改变。

我可能错过了一些非常明显的东西，但我一辈子都找不到。

有问题的代码是：

.downloadbtn 
    color: white;
    display: block;
    margin: auto;
    width: 250px;
    height: 60px;
    margin-top: 30px;
    padding: 20px;
    background: #06bce4;
    background: -moz-linear-gradient(top,  #06bce4 0%, #0589d4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#06bce4), color-stop(100%,#0589d4));
    background: -webkit-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
    background: -o-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
    background: -ms-linear-gradient(top,  #06bce4 0%,#0589d4 100%);
    background: linear-gradient(to bottom,  #06bce4 0%,#0589d4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#06bce4', endColorstr='#0589d4',GradientType=0 );
    border: 1px solid #076ca0;
    border-radius: 4px;
    -webkit-box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
    -moz-box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
    box-shadow: inset 0px 1px 0px 0px rgba(64, 209, 236, 1);
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    -moz-animation-delay: 2s;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;


.downloadbtn :hover 
    background: green;

这里有一个 JSFiddle：http://jsfiddle.net/4Xxaf/

【问题讨论】：

删除.downloadbtn :hover之间的空格应该是.downloadbtn:hover。

你不知道我现在有多愚蠢。谢谢。

【参考方案1】：

更新了小提琴。您在选择器和 :hover http://jsfiddle.net/4Xxaf/1/ 之间添加了一个空格

【讨论】：

你不知道我现在有多愚蠢。谢谢。

这只是那些日子之一:)

【参考方案2】：

删除代码中的空格

.downloadbtn:hover
    background: green;