如何改變背景顏色上懸停文字鏈接而不是圖像鏈接

Question

我有一個CSS規則是這樣的：

a:hover { background-color: #fff; } 

但是，這導致難看的縫隙，在圖像鏈接的底部，更糟糕的是，如果我有透明的圖像，鏈接的背景色可以通過圖像看到。

我之前已經多次在這個問題迷迷糊糊的，但我使用分配類圖片鏈接的快速和骯髒的方法總是解決了這個問題：

a.imagelink:hover { background-color: transparent; } 

今天，我一直在尋找一個更優雅解決這個問題的時候我偶然發現了this。

基本上它建議使用display: block，這真正解決了不透明圖像的問題。但是，這會導致另一個問題：現在鏈接與段落一樣寬，但圖像不是。

有沒有一種很好的方法來解決這個問題，還是我不得不再次使用髒方法？

感謝，

Answer 1

我試圖找到一些選擇，將只能得到<a>沒有<img>後代的元素，但找不到任何.. 。 關於與底部間隙的圖像，你可以做到以下幾點：

a img{vertical-align:text-bottom;} 

這應該擺脫顯示圖像後面向上的背景，但可以甩開佈局（通過並不多，雖然），所以小心。

對於透明圖像，您應該使用一個類。

我真的希望這是通過實現父母選擇器在CSS3中解決。

Answer 2

未經檢驗的想法：

a:hover {background-color: #fff;} 
img:hover { background-color: transparent;} 

Answer 3

以下應工作（未經測試）：

首先你

a:hover { background-color: #fff; } 

然後你

a:imagelink:hover { background-color: inherit; } 

第二條規則將覆蓋第一個爲< a class =「imagelink」等>並保留父級的背景顏色。

我試圖這樣做沒有階級=「」，但我不能找到一個CSS選擇器，是FOO>吧，當它是一個foo的孩子，其風格酒吧的對面。你可能想要設計風格，當它的有是一個階級吧的孩子。你可以做到這一點，甚至用jQuery做更漂亮的事情，但這可能不是一種常用的技術。

Answer 4

你可以使用display：inline-block，但這並不完全是交叉瀏覽器。 IE6和更低版本會有問題。

我假設你有<a>和<img>之間的空格？請嘗試刪除這樣的：

<a><img /></a>

Answer 5

我在你terming什麼「圖像鏈接」迷茫......是錨的內的「IMG」標籤？或者你在CSS中設置圖像？

如果您正在設置在CSS的形象，那麼就沒有問題就在這裏（因爲你已經能夠瞄準吧）......所以我必須假設你的意思是：

<a ...><img src="..." /></a> 

要哪個，我建議您指定的圖像上的背景色...因此，假設它的容器應該是白色的......

a:hover { background: SomeColor } 
a:hover img { background-color: #fff; } 

Answer 6

我平時做這樣的事情下，刪除圖像的差距：

img { 
    display: block; 
    float: left; 
} 

當然，這並不總是理想的解決方案，但它在大多數情況下的罰款。

Answer 7

我今天遇到了這個問題，並且使用了另一個解決方案，這要歸功於由提問者鏈接的display: block。這意味着我能夠在圖像上保留鏈接僅限，並且不會將其展開到其容器中。

圖像是內嵌的，所以它們在它們下面有空間用於字母的下半部分，如「y，j，g」。這將圖像定位在baseline，但是如果您沒有<a>TEXT HERE</a>（如徽標），則可以對其進行更改。但是，如果您使用普通顏色作爲背景（例如，在body或div#wrapper中），仍然需要遮蓋文本行空間及其簡單。

body { 
    background-color: #112233; 
} 
a:hover { 
    background-color: red; 
} 
a img { 
    border-style: none; /* not need for this solution, but removes borders around images which have a link */ 
    vertical-align: bottom; /* here */ 
} 
a:hover img { 
    background-color: #112233; /* MUST match the container background, or you arent masking the hover effect */ 
} 

Answer 8

這種方式更好。

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] { 
    text-decoration: none; 
    border: 0 none; 
    background-color: transparent; 
    } 

沒有繁瑣的類必須應用到每個圖像。詳細描述在這裏：

http://perishablepress.com/press/2008/10/14/css-remove-link-underlines-borders-linked-images/

Answer 9

我有同樣的問題。在我的情況下，我使用圖像作爲背景。我做了以下，它解決了我的問題：

background-image: url(file:"use the same background image or color");