用css改變下劃線的顏色在chrome中不起作用？

Question

我試圖在使用跨度懸停事件期間更改下劃線顏色，並且它在IE9和Firefox 13.01中可用，但它在Chrome中不起作用（它應該用金色強調）。

#menu li:hover span.underline { text-decoration:underline; color: #FAA301; }

<ul id="menu"> <li style="z-index: 7;"><span class="underline"><a href="#">link1</a></span></li> </ul>

這裏是js.fiddle：http://jsfiddle.net/wuUpL/7/。

我原本從這篇文章https://stackoverflow.com/a/1175402/1490248得到了這個想法，但那個不能在chrome中工作。

注：我不想用邊框來解決這個問題，我已經使用邊界爲界

誰能幫助我在這裏？是否有某種Chrome黑客/異常我可以用來解決這個問題？

Answer 1

我知道你說過你不想在這裏使用邊框，但是你發現在兩個瀏覽器之間的功能不一樣。

您可以通過添加內部跨度並在其上使用邊框來獲得此功能。

http://jsfiddle.net/wuUpL/10/

很抱歉，如果這不是你腦子裏想的是什麼，但壁虎和WebKit這裏不同意的東西！

Answer 2

也許值得注意的是，一般設置不同的父母和孩子的文字顏色，即使在Chrome中也可以獲得不同顏色的下劃線。但在鏈接裝修繼承一些奇怪的bug在Chrome：

u { 
 
    text-decoration: underline; 
 
    color: red; 
 
} 
 
u:hover { 
 
    text-decoration: overline; 
 
    color: green; 
 
} 
 
u * { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
u:hover * { 
 
    text-decoration: none; 
 
    color: gold; 
 
}

<p> 
 
    <u> 
 
    Parent with decoration. 
 
    <span>Child (is a <code>span</code>). This works: <code>text-decoraion</code> has differrent (parents) colour, always.</span> 
 
    </u> 
 
</p> 
 
<p> 
 
<p> 
 
    <u> 
 
    Parent with decoration. 
 
    <a href="#">Child (is a <code>link</code>). This does not work <strong>in Chrome</strong>: <code>text-decoration</code> has always childs colour.</a> 
 
    </u> 
 
</p>

奇怪的是，這兩個最裏面的元素在Chrome中有完全相同的計算樣式（根據開發工具） ，所以現在看來​​沒有什麼可以解決的。

未來將有可能使用單個元素和text-decoration-color CSS屬性。