CSS a hover not working

Hi, you can force your Hover Link Colors changing the line 21 of this file: https://poydalla.net/wp-content/themes/hueman-child/style.css from:

a:hover { color: #a54202; }

to

a:hover { color: #a54202 !important; }

The tag !important is not the best way to work with CSS rules, but does the trick when you don’t want to find all the rules that mess with some simple error.

You don’t want to use the !important clause in this case because there are so many elements which use the anchor tag (like author name, page titles, menu items, etc), so you will probably end up changing the color of elements that you didn’t intend to change if you are going to attach it to the a element.

You really should use a web debugger like Firebug or Chrome Developer Tools to find out what rule is currently in place for the link that you are trying to change. For example, if you are trying to change the hover color of your post titles, then you should add this rule:

.post-title a:hover {
   color: red;
}

Then you won’t accidentally change the hover color of any other link element.

Thanks to you both! I tried both of your tips, but I can’t really find the culprit… I tried removing Minify from W3 Total Cache and Hueman theme, but no help.

So right now, on your site, I see that the normal (not hovered) color of the post titles is #a54202, and the hovered color is #423029, but you want to switch it around?

No, they are actually fine, but normal links are the problem. For example here https://poydalla.net/boardgamegeek-kayttoohjeet/ under the picture I have a list of links. They’re all black, agh!

Unfortunately you still have minify turned on, so I can’t tell how or where you are adding your CSS. But I do see you have Jetpack installed, so try adding your CSS by going to Appearance → Edit CSS (if you don’t see such an option, go to Jetpack → Settings and activate the Custom CSS option).

Try adding this CSS rule:

.hentry a {
   color: #a54202;
}

Or use whatever other color you want.

Hi,
if you want to change color of your links below that picture, you should use this custom css code:

body a {
color: red;
}

on hover

body a:hover {
color: green;
}

and set color you want.

Hello!

I edited my child theme’s CSS and added CrouchingBruin’s suggestion, it worked! Thanks. Seems like my general a hover was naturally overridden. Dang, very basic, thanks!

I’m happy now and marking this resolved, thanks!

…I’m still trying to find solution to the following problem, but it’s probably something as basic as this and I’ve gotten enough help from you!

Somewhere there is still the #423029 that makes the page-title hovered the wrong color. Only place I found it was

::selection {
    background-color: #423029;
}

I added that to my css, but still nothing…agh!

Try this for the post titles:

.post-title a:hover {
   color: #a54202;
}

What I would do is turn off the minifying until you have made all of the changes that you want, then turn it back on. The minifying makes it hard to see where the rules are defined so writing the correct selector can be a little difficult.