如何選擇文本，而不是圖像，CSS

Question

簡單的問題：我有以下的標記......

<a href='#'> 
    <img src='icon.png'> This is the link 
</a> 

我想要成爲文字下劃線鼠標懸停。

什麼是CSS選擇器僅用於選擇<a>元素中的文本，而沒有其他內容？如果我不需要，我寧願不把它包裹在任何東西里。

a:hover { 
    text-decoration: none; 
} 
a:hover <select_text_here> { 
    text-decoration: underline; 
} 

Answer 1

由於文本沒有任何單獨的「手柄」，你可以選擇，你能做的最好的是強調整個a標籤，其中包括圖像。圖像本身在技術上不會被強調，所以你甚至不能「強調」它。

您必須將圖像從文本中分離出來，或者將文本包裝在span中，並僅突出顯示該文本。

Answer 2

我看到，Opera/IE不會強調圖像，但FF會。要解決這個問題最簡單的方法是添加span元素：

<a href="..."><img ... /> <span>...</span></a> 

，然後應用到text-decoration元素span：

a:hover span { 
    text-decoration: underline; 
} 

據我知道你不能只選擇文本。

Answer 3

該文本必須在其自己的元素，以便它可以在CSS中選擇。你必須使用一個span或類似：

<a href="#"><img src="" /><span class="link-text">Foo</span></a> 

很明顯，你就可以只使用.link-text選擇它。

Answer 4

也許試試這個：

a:hover { 
    text-decoration: underline; 
} 
a:hover IMG { 
    text-decoration: none; 
} 

Answer 5

a:hover { 
    text-decoration: underline; 
} 
a:hover img { 
    text-decoration: none; 
} 

你可以做的另一件事是

a{ 
    background: url(icon.png); background-repeat: no-repeat; padding-left: 10px 
} 

或類似的，所以你不必有圖像元素中的鏈接

Answer 6

a:hover { 
    text-decoration: none; 
} 
a:hover { 
    text-decoration: underline; 
} 

a img{ 
    text-decoration: none; 
} 

應該這樣做。這樣，a中的所有img標籤都不會有下劃線。