更改悬停时链接/按钮的背景颜色

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>