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

【问题标题】：Change background color of link/button on hover更改悬停时链接/按钮的背景颜色
【发布时间】：2017-04-12 13:12:44
【问题描述】：

我想更改此链接的背景颜色，当它悬停时看起来像一个按钮。我该怎么做呢。下面是它的当前 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;
}

【问题讨论】：

使用:hover 伪类？
类型属性谓词后面的 i 是什么？这应该与<i> 标签匹配吗？
@SamOnela - “在右括号前添加 i（或 I）会导致不区分大小写地比较值（对于 ASCII 范围内的字符）。” developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
How to use 'hover' in CSS的可能重复

标签： javascript jquery html css

【解决方案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;
}

&lt;button&gt;Button&lt;/button&gt;

【讨论】：

【解决方案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>

【讨论】：