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

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>