ホバー上のリンク/ボタンの背景色を変更する

Question

このリンクの背景色を変更したいときに、ボタンの上に乗ったときのように変更したいと思います。どうすればいいの？以下は現在のCSSです。

input[type="button" i], 
input[type="submit" i], 
input[type="reset" i], 
input[type="file" i]::-webkit-file-upload-button, 
button { 
    background-color: #fbf7de; 
    padding: 9px; 
    display: inline; 
    border-style: solid; 
    border-color: #fbf7de; 
    border-width: 5px; 
} 

Answer 1

これは基本的には - 私はこの例のためにセレクタを減らしました。また、ホバー状態の他のスタイル（border-colorなど）を変更し、アニメーションにtransitionを追加することもできます。

button { 
 
    background-color: #fbf7de; 
 
    padding: 9px; 
 
    display: inline; 
 
    border-style: solid; 
 
    border-color: #fbf7de; 
 
    border-width: 5px; 
 
} 
 

 
button:hover { 
 
    background: #fff; 
 
}

<button>Button</button>

Answer 2

要素に:hoverを追加

input[type="button"], input[type="submit"], input[type="reset"], input[type="file"]::-webkit-file-upload-button, button, a[href]{ 
 
    background-color:#fbf7de; 
 
    padding:9px; 
 
    display:inline; 
 
    border-style: solid; 
 
    border-color: #fbf7de; 
 
    border-width: 5px; 
 
} 
 
input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="file"]::-webkit-file-upload-button:hover, button:hover, a[href]:hover{ 
 
    background-color:#ff0000; 
 
}

<input type="button" value="button"/><br/> 
 
<a href="#">anchor</a>