懸停時的圖標字體背景

在我的網站的頁腳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; 
}

非常感謝您的幫助！

Stefaan

來源

2013-03-27 Stefaan

「圖標/圓形狀」實際上是一個矩形。您正在設置鏈接的白色背景。鏈接是一個矩形。您將無法直接設計字體/字符的背景。

由於您的圖標都是圓的，這裏有一個小竅門，你可以使用：

border-radius: 50px;

這只是一個猜測的數字。這並不意味着它是正確的。只需找到與您的圖標高度/寬度相匹配的人。（您可能還需要使用行高來確保您的字體是或至少看起來垂直居中。）

來源

2013-03-27 14:02:08 isotrope

..of當然，這不會在不支持邊界半徑的瀏覽器工作：http://caniuse.com/#feat=border-radius – isotrope 2013-03-27 14:03:44

或者，你可以使用'邊界半徑：50 ％':) – Terry 2013-03-27 14:07:18

更好。謝謝，@Terry – isotrope 2013-03-27 14:10:09

對於這一個沒有簡單的解決方案，因爲您只依賴字體。您可以嘗試添加border-radius（您的font-size設置爲50px，因此25px的半徑可能會這樣做，但您必須隨時使用它）到.share a:hover元素。

來源

2013-03-27 14:03:07 SKeurentjes

謝謝！我實現了這一點，但它仍然在紅色圓圈周圍顯示出白色邊緣......嘗試使用'background-size：25px 25px'，但那沒有做任何事情。有任何想法嗎？ – Stefaan 2013-03-27 17:12:34

也許你可以在'.share a：hover'上使用'background-image'（白色圓圈的寬度爲正確尺寸） – SKeurentjes 2013-03-28 10:52:10

懸停時的圖標字體背景

回答

相關問題