CSS: селектор наведения не меняет цвет

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>