超链接内SVG用class设置hover样式失效的原因排查

Let's break down why your class-based hover styling isn't working, and how to fix it properly.

First, here's your original code for context:

HTML #

<footer> 
  <div class="row"> 
    <div class="col span-1-of-2"> 
      <ul class="footer-nav"> 
        <li><a href="#">About us</a></li> 
        <li><a href="#">Blog</a></li> 
        <li><a href="#">Press</a></li> 
        <li><a href="#">iOS App</a></li> 
        <li><a href="#">Android App</a></li> 
      </ul> 
    </div> 
    <div class="col span-1-of-2"> 
      <ul class="social-icons"> 
        <li><a class="facebook-icon" href="#">
          <svg version="1.1" width="25px" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve"> 
            <path d="M384,176h-96v-64c0-17.664,14.336-32,32-32h32V0h-64l0,0c-53.024,0-96,42.976-96,96v80h-64v80h64v256h96V256h64L384,176z"/> 
          </svg>
        </a> </li> 
        <li><a href="#"><img src="vendors/img/social-media/twitter.svg"></a></li> 
        <li><a href="#"><img src="vendors/img/social-media/google-plus.svg"></a></li> 
        <li><a href="#"><img src="vendors/img/social-media/instagram.svg"></a></li> 
      </ul> 
    </div> 
  </div> 
  <div class="row"> 
    <p> Copyright &copy; 2015 by Omnifood. All rights reserved. </p> 
  </div> 
</footer>

CSS #

/* ----- FOOTER ------ */
footer {
 background-color: #313131;
 padding: 50px;
}
.footer-nav {
 list-style: none;
 float: left;
}
.social-icons {
 list-style: none;
 float: right;
}
.social-icons img {
 width: 25px;
}
.footer-nav li, .social-icons li {
 display: inline-block;
 margin-right: 20px;
}
.footer-nav li:last-child, .social-icons li:last-child {
 margin-right: 0;
}
.footer-nav li a:link, .footer-nav li a:visited, .social-icons li a:link, .social-icons li a:visited {
 text-decoration: none;
 border: 0;
 color: #888;
 fill: #888;
 transition: fill 0.2s;
}
.facebook-icon:hover, .facebook-icon:active{
 fill: #fff;
}
.footer-nav li a:hover, .footer-nav li a:active {
 color: #ddd;
}
footer p {
 color: #888;
 text-align: center;
 font-size: 90%;
 margin-top: 30px;
}
/* ----- END FOOTER ------ */

Why the class selector fails #

The root issue is CSS specificity. Your base style for social links:

.social-icons li a:link, .social-icons li a:visited {
  fill: #888;
}

has a specificity score of 0,0,2,1 (2 classes + 1 pseudo-class).

Your hover class selector:

.facebook-icon:hover, .facebook-icon:active{
  fill: #fff;
}

only has a score of 0,0,1,1 (1 class + 1 pseudo-class).

Since the base style has higher specificity, it overrides the hover class's fill property. When you use an ID instead (like #facebook-icon:hover), its specificity jumps to 0,1,0,1, which beats the base style—hence why it works.

How to fix the class selector #

You need to boost the specificity of your hover rule to match or exceed the base style. Here are three solid approaches:

1. Make the selector more specific #

Include the parent classes and pseudo-class context to match the base style's specificity:

.social-icons li a.facebook-icon:hover, 
.social-icons li a.facebook-icon:active {
  fill: #fff;
}

This way, your hover rule has the same specificity as the base style, so it takes precedence when the link is hovered.

2. Target the SVG directly inside the hovered link #

Instead of setting fill on the link, target the child SVG element. This avoids specificity conflicts entirely:

.facebook-icon:hover svg, 
.facebook-icon:active svg {
  fill: #fff;
}

This works because we're applying the fill directly to the SVG, which overrides any inherited fill from the link.

3. (Last resort) Use !important #

While not ideal for long-term maintainability (it can make debugging harder), adding !important will force the rule to take precedence:

.facebook-icon:hover, .facebook-icon:active{
  fill: #fff !important;
}

Best practices for styling inline SVG inside links with classes #

For cleaner, more maintainable code, here's a recommended pattern:

/* Base style for all inline SVG in social links */
.social-icons li a svg {
  fill: #888;
  transition: fill 0.2s;
}

/* Hover style for all social icons */
.social-icons li a:hover svg {
  fill: #fff;
}

/* Specific hover colors for individual platforms */
.social-icons li a.facebook-icon:hover svg {
  fill: #1877f2; /* Facebook blue */
}
.social-icons li a.twitter-icon:hover svg {
  fill: #1da1f2; /* Twitter blue */
}

This approach directly targets the SVG element, keeps specificity low and manageable, and makes it easy to add platform-specific colors later.

内容的提问来源于stack exchange，提问作者Shahrukh Azhar