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。

＆＃13;

button {
  background-color: #fbf7de;
  padding: 9px;
  display: inline;
  border-style: solid; 
  border-color: #fbf7de;
  border-width: 5px;
}

button:hover {
  background: #fff;
}

＆＃13;

<button>Button</button>

＆＃13;

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>

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

2 个答案: