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浏览器上。

我的图片： enter image description here

我的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正在造成这种情况。

字体真棒叠加图标悬停大纲问题

1 个答案: