Link hover color glitch

Hi Nataliekenyon,

There is a simple css workaround for this. It’s not always the best way to solve issues but with something simple like this it wont hurt.

a:hover {
  color: color !important;
}

The important will keep it the same across everything, and to ensure it’s the right color you should use a hex value or rgba (#,#,#,#)

Hope this helps!

@nlmosler,

Thank you for the support!

I implemented the CSS, and unfortunately the problem persists – out of IE, Chrome, Opera, and Firefox, Internet Explorer is the only browser on which all links consistently display the hover color.

@nlmosler,

Sorry I take it back! Had a typo – the code does work!

However, now my menu link hover color has been converted to that color (e.g. blue), and I would like it to be a different color – any suggestions?

Thank you!

I notice my buttons on my static slider are also displaying that hover color, which I would also like to change…

@nataliekenyon

Can you link me your website so I can take a closer look at everything?

@nlmosler

Thanks for the help – unfortunately I cannot share the url.

I am new to html/css – what I would like to do is be able to hard code the link hover color for different elements. I want the link hover color for the buttons to be white, for example; for the top menu, red; for all others, blue.

Any code suggestions?

Thanks again!!

a:hover {
  color: color !important;
}

This covers all links on the site. It will over-ride any other link styling before it.

You could eliminate the “!important” by setting the major set of anchor (link) stylings at the beginning of your CSS file just after any styling of the “body”, e.g.:

body {
// any basic body styling
}

a:link {
  color: #color;
}
a:visited {
  color: #color;
}
a:hover {
  color: #color;
}
a:active {
  color: #color;
}

To style other specific links after the basic link styling, you would have to specify the actual place the link is, e.g.:

#slider-name a:hover {
  color: #color;
}

Read about “Anchor Pseudo-classes” here: https://www.w3schools.com/css/css_pseudo_classes.asp

One thing you should do is validate your CSS. Google Chrome has a tendency to be a little more forgiving when it comes to CSS errors than other browsers, especially Internet Explorer. It’s possible that the CSS that is affecting the :hover color is incorrect in some way that IE is not picking up properly, but Chrome is.