Question

如果我遗漏5 背景图像渐变线（下方），按钮颜色会在悬停时成功更改。但是，如果我让他们进入，阴影继续在悬停但不是背景颜色。有什么想法吗？

.buttonlink:link, .buttonlink:visited {
    background-color: #557fff;                          /* For browsers that do not support gradients */
    background-image: -moz-linear-gradient(top,#08c,#04c);  /* Firefox 3.6-15*/
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(top,#08c,#04c);   /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -o-linear-gradient(top,#08c,#04c);        /* Opera 11.1-12 */
    background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
    color: white;
    width:125px;
    height:25px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    display: inline-block;
    border: 2px solid #0055ff;
    border-radius: 5px;
}

.buttonlink:hover, .buttonlink:active {
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

MassDebates亲切地创建了一个有效的例子。我也在jsfiddle中创建了一个例子，它也有效。我的css文件中的其他内容是否覆盖了它？这是完整的CSS：

body {
        height: 100%;
        line-height: 25px;
        font-size: 13px;
}

.infoReset {
        border-width: 1px;
        border-style: solid;
        border-color: #858585;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color: #FFFFFF;
        /**behavior: url(PIE.htc);**/
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
        -pie-poll: true;
        position: relative;
        width: 250px;
}

.auditLogSearch {
    border-width: 1px;
    border-style: solid;
    border-color: #858585;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #FFFFFF;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
    -pie-poll: true;
    position: relative;
    width: 100px;
}

#FromDatePicker, #ToDatePicker {
    width: 75px;
}

input[type="text"]:FOCUS,input[type="password"]:FOCUS,select:FOCUS,textarea:FOCUS {
        border: 1px solid #52A8EC !important;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px
                rgba(82, 168, 236, 0.6);
        outline: 0 none;
        /**behavior: url(PIE.htc);**/
        -pie-poll: true;
        position: relative;
}

input[textarea] {

        resize: none;
}

#page-wrapper {
        width: 800px;
        min-width: 800px;
        min-height: 500px;
        clear: both;
        margin: 0 auto;
}

#audit-wrapper {
    width: 1000px;
    min-width: 1000px;
    min-height: 500px;
    clear: both;
    margin: 0 auto;
}

hr {
    border: 2px solid #000;
}

.hidden {
     display: none;
}

#auditTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 70%;
}

#auditTable td, #auditTable th {
    border: 1px solid #ddd;
    text-align: left;
    padding: 3px;
}

#auditTable tr:nth-child(even){background-color: #f2f2f2}

#auditTable tr:hover {background-color: #ddd;}

#auditTable th {
    padding-top: 8px;
    padding-bottom: 8px;
    background-color: #4CAF50;
    color: white;
}

.buttonlink:link, .buttonlink:visited {
    background-color: #557fff;                          /* For browsers that do not support gradients */
    background-image: -moz-linear-gradient(top,#08c,#04c);  /* Firefox 3.6-15*/
    background-image: -webkit-gradient(linear,0 0,0 100%,from(#08c),to(#04c));
    background-image: -webkit-linear-gradient(top,#08c,#04c);   /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image: -o-linear-gradient(top,#08c,#04c);        /* Opera 11.1-12 */
    background-image: linear-gradient(to bottom,#08c,#04c); /* Standard, must be last */
    color: white;
    width:125px;
    height:25px;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
    display: inline-block;
    border: 2px solid #0055ff;
    border-radius: 5px;
}

.buttonlink:hover, .buttonlink:active {
    background-image: -moz-none;
    background-image: -webkit-none;
    background-image: -webkit-none;
    background-image: -o-none;
    background-image:none;
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

h2 {
     color: #5F489D;
}

Answer 1

您的CSS没有规则可以覆盖以前设置的背景图片样式。请考虑以下事项：

.buttonlink:hover, .buttonlink:active {
    background-image: -moz-none;
    background-image: -webkit-none;
    background-image: -webkit-none;
    background-image: -o-none;
    background-image:none;
    background-color: #E2AD27;
    box-shadow: 5px 5px 5px #888888;
}

这是一个演示，向您展示一个实例：

https://github.com/ngokevin/aframe-event-set-component/tree/master/dist

Answer 2

这是最简单，最少量的线条，也是解决问题的最简单方法：

.buttonlink:hover, .buttonlink:active {
    background: #E2AD27;
}

当存在渐变时，css悬停背景颜色不起作用

2 个答案: