asked on

CSS Hover Color not working?

I have this code:

<style>
	a:link { color: white; }
	a:hover { color: #8CC6EC; }
</style>	
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4 text-center">&nbsp;</div>
<div class="col-sm-1 col-xs-1 text-center" style="font-family: 'Montserrat', sans-serif; font-weight: bold; color:white;"><a href="main.php">Home</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Montserrat', sans-serif; font-weight: bold; color:white;"><a href="choose_proj_sel.php">Saved Items</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Montserrat', sans-serif; font-weight: bold; color:white;"><a href="http://www.lakos.com/About/contact-us" target="blank">Contact LAKOS</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Montserrat', sans-serif; font-weight: bold ;color:white;"><a href="profile.php" onClick="return prof_window();">Profile</a></div> 
<div class="col-sm-1 col-xs-1 text-left" style="font-family: 'Montserrat', sans-serif; font-weight: bold; color:white;"><a href="logout.php">Logout</a></div>
</div>

Open in new window

This worked perfectly, until I added the Montserrat font, with this in the head scetion

<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">

Now ALL the links except Profile are in the hover color, profile is white.

That's crazy.

What is wrong?

Brandon Lyon

You are using inline styles on elements which have more specificity than the css inside the style tag.

style="font-family: 'Montserrat', sans-serif; font-weight: bold; color:white;"

Open in new window

This is always going to override the cascade. Your options are to:

1. remove the style tag's color:white

or

2. add an !important to the end of your CSS. a:hover { color: #8CC6EC !important; }

I highly recommend the former over the latter.

Please see this link for more information about how CSS specificity works https://getflywheel.com/layout/css-specificity-guide/

Richard Korts

ASKER

Ok, I did BOTH of what you suggested, removed the font of Montserrat, changed to Arial, cleared the cache in Chrome, still the same with font of Arial, but the font is NOT Arial. See attached image. Impossible!

The code is from view source, so source does not correspond to reality. Impossible!

<style>	a:link { color: white!important; }	a:hover { color: #8CC6EC; }</style>	<div style="background-image: url('https://www.lakoshvac.com/devdev/images/header_new_s.jpg');  text-align: center; height: 115px;">
<div class="row hidden-xs">
<div class="col-sm-4 col-xs-4 text-center">&nbsp;</div>
<div class="col-sm-1 col-xs-1 text-center" style="font-family: 'Arial', sans-serif; font-weight: bold; "><a href="main.php">Home</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-weight: bold; "><a href="choose_proj_sel.php">Saved Items</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-weight: bold; "><a href="http://www.lakos.com/About/contact-us" target="blank">Contact LAKOS</a></div>
<div class="col-sm-2 col-xs-2 text-center" style="font-family: 'Arial', sans-serif; font-weight: bold ;"><a href="profile.php" onClick="return prof_window();">Profile</a></div> 
<div class="col-sm-1 col-xs-1 text-left" style="font-family: 'Arial', sans-serif; font-weight: bold; "><a href="logout.php">Logout</a></div>
</div>

Open in new window

impossible.PNG

Richard Korts

ASKER

Does the same in Firefox. Impossible!

Brandon Lyon

Do you have a reference I can look at? There might be other CSS files conflicting with the font choice.

That said, your screenshot looks like Arial to me but Montserrat is a very similar looking font. The giveaway for me is the shape of the lowercase letter a.

Richard Korts

ASKER

I sent you a message with logon credentials on how to reproduce.

Thanks!

ASKER CERTIFIED SOLUTION

Brandon Lyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Korts

ASKER

Oh, so I need to make the visited ones white? I think there is a css for that.

Thanks