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

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 に答える