css hoverグラデーションが存在するときに背景色が動作しない

Question

グラデーションライン（下段）グラデーションラインを除外すると、ホバーでボタンの色が変わります。しかし、私がそれらを残しておけば、影はホバリングでは機能しますが、背景色では機能しません。何か案は？

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

ここであなたの実際の例を示すためのデモです：

http://codepen.io/anon/pen/kXZwdX

Answer 2

これはラインの最も簡単な、より少ない量、そしてあなたの問題への最も簡単なソリューションです。

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