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

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>