如何避免：懸停行動在CSS中的IMG？

Question

假設我有以下選擇：

a  { padding: 1em; } 
a:hover { backgrond-color: #FF0000; } 

並假設我有以下的HTML代碼：

<a href="http://stackoverflow.com"><img src="so.jpg"></a> 

什麼情況是，<img>得到鼠標懸停紅色的背景色。

任何想法如何解決它？

謝謝，Boda Cydo！

Answer 1

無論具體談談您的a:hover選擇

.something a:hover { background-color: #ff000; } 

或創建另一個選擇是塊從實例中被改變的背景下，你不希望它

a.no-bg-change:hover { background: none !important; } 

<a href="http://stackoverflow.com" class="no-bg-change"><img src="so.jpg"></a> 

Answer 2

由於您的圖像是不透明的，大部分時間只是刪除邊框和填充就足以隱藏紅色顯示。

a img { border: none; padding: 0; margin: -1em; } 

陰性切緣那裏否定a填充

Answer 3

我很好奇你是如何看到通過一個jpg紅色背景。儘管如此，這應該可以做到。

a:hover img { 
    background:transparent; 
} 

Answer 4

jQuery('a').hover(function(){ 
    jQuery(this).has('img').css('background', 'none'); 
}); 

Answer 5

好吧，你不相信我，但我不得不上述同樣的問題，我解決如下：

我有這樣的事情：

<a href="#">
                <img src"path/to/image.gif">
</a>

而在我的CSS我有：

a:hover { text-decoration: underline; }

，請相信我，我不得不把「IMG」標籤在同一行中的一個標籤，就像這樣：

<a href="#"><img src="path/to/img.gif"></a>

那全是！

Answer 6

這很奇怪，你說的是使a有背景，但只有在有圖像時，纔不要。而如果一個鏈接有一個文本和一個圖像呢？讓它更簡單，只需告訴你想要的。我想你可以這樣做，例如：

<a href="..."><img src="so.jpg"></a> 
<a href="..."><span class="text">some text</span></a> 
<a href="..."><span class="text">some text</span> and <img src="so.jpg"></a> 

a .text { padding: 1em; } 
a:hover .text {background-color:#ff0}