1

我正在尝试通过在一个开放的正方形内插入一个图标来使用 fontawesome 创建图标。悬停时，我想更改正方形内背景的颜色，以及正方形的实际颜色和图标颜色。

我在这里举了一个例子：http: //jsfiddle.net/5hzv3/2/

.social-icons .fa-square-o:hover {
    background-color: #3b5998; /* This overflows outside the square */
    color: #fff
}

问题是您实际上将鼠标悬停在正方形的子元素上，所以我试图让它工作。

4

2 回答 2

4

这就是你需要的吗？

小提琴：http: //jsfiddle.net/5hzv3/6/

刚刚将您的CSS更改为：

.fa-lg:hover { color: #fff }
.fa-lg:hover > i { color: #3b5998; }

如果只有正方形必须改变。这是代码：

.fa-lg:hover { color: #fff }
.fa-lg:hover > .fa-square-o { color: #3b5998; }

编辑 我创建了一个可以帮助你的例子。它不是适合每种情况的通用 css，buuut，可能会给你一些想法。

希望它有所帮助...... http://jsfiddle.net/5hzv3/15/

于 2013-11-14T13:30:57.983 回答
3

以 Felipe Miosso 的示例为基础，我想出了如何以最少的方式做到这一点，并且仍然使用官方图标：

<style>
  .fa-stack       .fa                    { color: #000000; }
  .fa-stack       .fa.fa-square          { color: #FFFFFF; }
  .fa-stack:hover .fa.fa-facebook-square { color: #3B5998; }
</style>
<span class="fa-stack">
  <i class="fa fa-square fa-stack-1x"></i>
  <i class="fa fa-facebook-square fa-stack-1x"></i>
</span>

http://jsfiddle.net/5hzv3/27/

于 2014-02-09T19:38:54.183 回答