CODEWITHSUNDEEP
htmlcsswordpresshyperlinkhover
HappyHands31
HappyHands31

Reputation: 4101

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-header .fa a:hover {
color: #72984a !important;
}

.fa .fa-facebook-square a:hover {
color:#72984a !important;
}

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

.logo .mobile-social-icons .hidden-tablet a:hover {
color:#72984a !important;
}

.social-icons .hidden-mobile .responsive-header-gutter a:hover {
color: #72984a !important;
}

In the stylesheet but none of them are showing up in the inspector. I would try just a:hover in the stylesheet (no class before it) but then of course that would apply to all of the hyperlinks. How can I style only the social media links when you hover over them? Thanks!

Screenshot

Upvotes: 0

Views: 2954

Answers (1)

Racil Hilan
Racil Hilan

Reputation: 25371

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.

Upvotes: 1

Related Questions