字体真棒堆叠图标悬停轮廓问题

Question

我正在使用字体真棒堆叠图标。我的代码是：

<span id="twitterBox" class="fa-stack"><i id="faTwittertSquare" class="fa fa-square fa-  stack-2x colorOrange"></i><i id="fatwitter" class="fa fa-twitter fa-stack-1x colorWhite" title="twitter"></i></span>

<span id="facebookBox" class="fa-stack"><i id="faFacebookSquare" class="fa fa-square fa-stack-2x colorOrange"></i><i id="faFacebook" class="fa fa-facebook fa-stack-1x colorWhite" title="facebook"></i></span>

鼠标悬停时改变颜色的jquery代码是：

$("#twitterBox").hover(function(){
$("#faTwittertSquare").removeClass("colorOrange");
$("#faTwittertSquare").addClass("colorWhite");
$("#fatwitter").removeClass("colorWhite");  
$("#fatwitter").addClass("colorOrange");
},function(){
$("#faTwittertSquare").removeClass("colorWhite");
$("#faTwittertSquare").addClass("colorOrange");
$("#fatwitter").removeClass("colorOrange");
$("#fatwitter").addClass("colorWhite");
});

$("#facebookBox").hover(function(){
$("#faFacebookSquare").removeClass("colorOrange");
$("#faFacebookSquare").addClass("colorWhite");
$("#faFacebook").removeClass("colorWhite");
$("#faFacebook").addClass("colorOrange");
},function(){
$("#faFacebookSquare").removeClass("colorWhite");
$("#faFacebookSquare").addClass("colorOrange");
$("#faFacebook").removeClass("colorOrange");
$("#faFacebook").addClass("colorWhite");
});

一切正常，但是当我将鼠标悬停多次时，图标右侧小线可见。如何修复它。此问题仅在 chrome 浏览器上。

这是我的图片：

我的css代码：

.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
           }

   .fa {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
       }

    .fa-square-o:before {
        content: "\f096";
                        }

     .fa-square:before {
        content: "\f0c8";
                       }
     .fa-stack-2x {
         font-size: 2em;
                  }

     .fa-stack-2x {
         position: absolute;
         left: 0;
         width: 100%;
         text-align: center;
                  }
      .fa-twitter:before {
         content: "\f099";
                         }
       .fa-facebook:before {
         content: "\f09a";
                           }

       .colorWhit{
         color:#FFFFFF;
                 }

       .colorOrange{
          color:#FFA500;
                   }

Answer 1

这是一个纯 CSS 的解决方案：http://jsfiddle.net/h66t0sde/1/

CSS：

span.social-box i.social-inner{
    color:#FFA500;
}

span.social-box i.social-outer{
    color:#fff;
}

/* Swap colors on hover */
span.social-box:hover i.social-inner{
    color:#fff;
}

span.social-box:hover i.social-outer{
    color:#FFA500;
}

HTML：

<span id="twitterBox" class="fa-stack social-box">
    <i id="faTwittertSquare" class="fa fa-square fa-stack-2x social-outer"></i>
    <i id="fatwitter" class="fa fa-twitter fa-stack-1x social-inner" title="twitter"></i>
</span>

<span id="facebookBox" class="fa-stack social-box">
    <i id="faFacebookSquare" class="fa fa-square fa-stack-2x social-outer"></i>
    <i id="faFacebook" class="fa fa-facebook fa-stack-1x social-inner" title="facebook"></i>
</span>

作为旁注，您应该避免包含颜色名称的类，因为这会使您在以后使用令人困惑的名称（如果颜色发生变化）或必须追踪您使用过它的任何地方（如果您更改名称以匹配新颜色）。

我也不想依赖 FontAwesome 类来获得效果，因为它们已经改变了一次。为此，我想出了一些似乎合适的相关位的名称。

至于你看到的那一行：不知道。我在 Chrome 或 Firefox 中查看它时在这个 jsFiddle 中看不到它，所以如果你仍然看到它，那么在你的 CSS 的其余部分导致了这种情况。