更改懸停上的鏈接/按鈕的背景顏色

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>