How To Style Specific Element On Hover With CSS?

This question is for http://chameleonwebsolutions.com. I need it so that when you hover over the social media links, their color changes to a darker green (#72984a). I tried: .site

Solution 1:

The squares are inside the <a> tags, not the other way around like you're trying to do. Your CSS .fa a:hover applies to <a> inside the .fa which is the class for the squares.

The problem is that the green color is applied to the squares <i> not the <a>. I cannot test your code, but try this:

.social-icons i:hover {
    color: #72984a;
}

Or of course this is the same but using class selector instead of tag:

.social-icons .fa:hover {
    color: #72984a;
}

However, if you want to follow the exiting CSS way, use this:

.site-header .fa:hover {
    color: #72984a;
}

In all cases, always try to apply the correct styles and avoid using !important.