html - 如何在悬停时更改 fontawesome 图标背景？ fiddle 手

Question

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

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

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

问题是您实际上是将鼠标悬停在正方形的子元素上，所以我正在努力让它发挥作用。

Answer 1

这就是你需要的？

fiddle : http://jsfiddle.net/5hzv3/6/

刚刚将您的 css 更改为:

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

如果只有，方 block 必须改变。这是代码:

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

已编辑我创建了一个可能对您有帮助的示例。它不是适合所有情况的通用 css，但是，可能会给您一些想法。

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