html - 使用引导按钮将背景从透明更改为红色

Question

当悬停在按钮上时，我试图将背景从透明更改为红色。

在 html 中，

<a class="btn btn-default" href="#" role="button" style="background-color: transparent; ">Click here</a>

在 CSS 中，

a:hover {
  border: 2px solid #000; 
  background-color: #f00;
}

当我点击按钮时，我可以看到边框颜色发生变化但背景没有变化。这有什么问题吗？

Answer 1

内联样式具有更高的优先级，它们会在悬停时覆盖您的样式。通过类设置超链接的样式，然后在悬停时覆盖它。

a.btn {
  background-color: transparent;
}
a.btn:hover {
  border: 2px solid #000;
  background-color: #f00;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<a class="btn btn-default" href="#" role="button">Click here</a>