選擇一個不含img的元素

Question

在html5網頁上我有一個懸停效果。就像這樣：

a:hover { 
    background: #EFEFEF; 
} 

我也有圖片與鏈接的列表：

<a href="x"> 
    <img src="images/y.png" /> 
</a> 

當鼠標懸停在這些鏈接，出現在圖像下＃EFEFEF色線。我如何刪除它？

這不是文字修飾：下劃線，也填充填充不起作用。

Answer 1

您可能會看到圖片下方的背景。設置圖像的顯示，以塊：

a img { 
    display: block; 
} 

之前和之後演示：http://jsbin.com/enikoz/edit#preview

請記住儘管這將內嵌圖像成塊元素會影響我們的佈局。

Answer 2

您正在看到圖像下方空白處的背景顏色;如果你的圖像後刪除空格，它應該走：

<a href="x"> 
    <img src="images/y.png" /></a> 

Answer 3

，以增強喬納森的回答，如果你不想要的元素的佈局改變，我建議打開a成一個inline-block以及使img一個block。

a {display:inline-block} 
a img {display:block} 

這樣一來，a將保持在線，文本將保持其完整性。見jsFiddle。

Answer 4

如果您的圖片鏈接指向一個共同的目錄或網站，您可以通過使用具有正則表達式技巧的屬性選擇器來實際選擇它們。

a[href*="foo"]:hover { 
    background:transparent; 
} 

因此，基本上，這將在其href屬性中選擇所有具有「foo」的元素。等號之前的星號用作通配符。否則，它只會選擇具有「foo」href的元素。

Answer 5

我的猜測是，你看到的是線下的圖像的伸空間（坐在文本基線）填充與背景的顏色。嘗試text-align: bottom應用於圖像本身，看看該線是否消失或轉移到圖像的頂部。如果沒有，請嘗試text-bottom。

如果其中任何一個工作，然後垂直對齊是問題，並且您可以通過向圖像添加一個頁面顏色的背景並給它一些底部填充（例如，0.15em），同時也將它對齊到底部（如前所述使用bottom或text-bottom）。