字體真棒疊加圖標懸停大綱問題

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");
});

這一切都工作，但當我鼠標懸停圖標許多時間圖標右側小線visible.how來修復它。這個問題只在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的其他內容就會導致這種情況發生。