Question

我是CSS的新手，所以请不要为简单起见在这里咬我的头。基本上，我试图将光标悬停在Unicode字符上时更改其颜色，但它似乎不起作用。

当前代码：

.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

问题是您正在使用内联CSS在HTML中将颜色定义为白色。内联样式优先于外部样式表，因此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选择器不会更改颜色

1 个答案: