CODEWITHSUNDEEP
htmlcsshover
user12502105
user12502105

Reputation:

CSS :hover Selector does not change colour

I am new to CSS, so please don't bite my head off here for something very simple. Basically, I am trying to change the color of a uni code character when hovering the cursor over it, but it does not seem to be working.

Current Code: 

.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>

Could someone please, kindly, tell me what I am doing wrong, along with some better advice on how to avoid common CSS mistakes, or if this is bad practice. Thank you!

Upvotes: 0

Views: 94

Answers (1)

AJ_
AJ_

Reputation: 1485

The problem is that you are defining the color to white in your HTML with inline CSS. Inline styling takes precedence over external stylesheets, so your CSS is ignored. Move the CSS from the HTML document to your external CSS file.

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>

Upvotes: 1

Related Questions