0

私のサイトhttp://www.stefaanoyen.be (左の列)のフッターには、アイコン フォントであるソーシャル メディアのアイコンがいくつかあります。ホバーすると、円が赤く、その中のアイコンが白くなります。赤い円は機能しますが、その後ろに白い四角があります。白をアイコン/円の形状に制限するにはどうすればよいですか?

これは私の HTLM です:

<p class="share"><a href="#">l</a> <a href="#">i</a> <a href="#">g</a> <a href="#">f</a></p>

そして、これは私のCSSです:

.share a {
color: #ececec;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
}

.share:hover {
cursor: pointer;
}

.share a:hover {
color: #B61618;
text-decoration: none;
font: 50px 'socialicoregular', Helvetica, sans-serif;
background-color: #fff;
}

助けてくれてどうもありがとう！

ステファーン

4

2 に答える 2

1

フォントのみに依存しているため、これに対する簡単な解決策はありません。border-radius要素に（あなたfont-sizeは50pxに設定されているので、25pxの半径でおそらくそれができますが、それをいじる必要があります）を.share a:hover要素に追加しようとすることができます.

于 2013-03-27T14:03:07.143 に答える
0

「アイコン/円の形」は実際には長方形です。リンクに白い背景を設定しています。リンクは長方形です。フォント/文字の背景を直接スタイル設定することはできません。

アイコンはすべて丸みを帯びているため、使用できるちょっとしたトリックを次に示します。

border-radius: 50px;

あくまでも推測の数字です。それが正しいという意味ではありません。アイコンの高さ/幅に一致する必要なものを見つけるだけです。(フォントが垂直方向の中央に配置されているか、少なくとも垂直に見えるようにするために、line-height を操作する必要がある場合もあります。)

于 2013-03-27T14:02:08.747 に答える