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!

回答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.

来源：https://stackoverflow.com/questions/38276343/how-to-style-specific-element-on-hover-with-css