CSS :hover Selector 不改变颜色

Question

我是 CSS 的新手，所以请不要在这里为一些非常简单的事情咬我的脑袋。基本上，我试图在将光标悬停在 uni 代码字符上时更改它的颜色，但它似乎不起作用。

当前代码：

.fa:hover {
  color: red;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="google-circle">
  <a href="www.google.com" class="fa fa-google" style="font-size: 19px; color: white; margin-left: 7px; margin-top: 5.5px; text-decoration: none;"></a>
</div>

有人可以告诉我我做错了什么，以及如何避免常见 CSS 错误的更好建议，或者这是不好的做法。谢谢！

Answer 1

问题是您在 HTML 中使用内联 CSS 将颜色定义为白色。内联样式优先于外部样式表，因此您的 CSS 将被忽略。将 CSS 从 HTML 文档移动到外部 CSS 文件。

body {
  background-color: #C2C2C2;
}

.fa {
  font-size: 19px; 
  color: white; 
  margin-left: 7px; 
  margin-top: 5.5px; 
  text-decoration: none;
}

.fa:hover{
  color: red !important;
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="google-circle">
  <a href="www.google.com" class="fa fa-google" style=""></a>
</div>

CSS :hover Selector 不改变颜色

CSS :hover Selector does not change colour

html

css

hover