字体神器堆叠图标悬停轮廓问题

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

- nmkkannan

---

请发布您所展示的图像的完整CSS。 - NoobEditor

我没有使用任何额外的CSS样式，只有颜色样式，其他都嵌入在FontAwesome CSS中。 - nmkkannan

添加类 colorWhite， colorOrange。 - Bindiya Patoliya

你为什么不直接使用:hover？ - Tieson T.

首先，我使用CSS的:hover，但它没有正常工作。因此，我改用了jQuery的hover方法。 - nmkkannan

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中的其他部分导致了这种情况。

- Tieson T.

---

谢谢您的帮助，它正在工作，但是当快速再次悬停时，出现了相同的问题。 - nmkkannan

@dev 正如我在上一段中提到的那样：我没有看到那个。 没有白线，也没有黑线。你样式表中的其他部分可能导致了这种情况。 - Tieson T.