Änderung der Unterstreichfarbe mit CSS funktioniert nicht in Chrom?

Question

Ich versuche, die Unterstreichung Farbe während eines Hover-Ereignisses mit Spannen zu ändern und es funktioniert in IE9 und Firefox 13.01, aber es funktioniert nicht in Chrome (es sollte in Gold unterstreichen).

#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>

Hier ist js.fiddle: http://jsfiddle.net/wuUpL/7/.

Ich hatte ursprünglich die Idee von diesem Beitrag https://stackoverflow.com/a/1175402/1490248, aber das funktioniert auch nicht in Chrom.

Anmerkung: Ich möchte nicht, Grenzen verwenden, um dies zu beheben, ich bin schon Grenzen als Grenze

Kann jemand mir helfen hier mit? Gibt es eine Art Chrom-Hack/Ausnahme, die ich verwenden könnte, um das zu beheben?

Answer 1

Ich weiß, du hast gesagt, du wolltest hier keine Grenzen verwenden, aber du hast etwas gefunden, das zwischen den beiden Browsern nicht gleich funktioniert.

Sie können dies in Chrome arbeiten, indem Sie innere Spannen hinzufügen und einen Rand darauf verwenden.

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

Sorry, wenn es nicht das, was Sie im Sinn hatte, aber Gecko und Webkit stimmen hier nicht auf etwas!

Answer 2

Vielleicht erwähnenswert, dass allgemein Einstellung verschiedene Eltern und Kind Textfarbe, um verschiedene farbige Unterstreichung funktioniert sogar in Chrome. Aber es gibt einige seltsame Fehler in Link Dekoration Erbe in 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>

Was seltsam ist, dass beide innersten Elemente haben genau die gleichen berechneten Stil in Chrome (gemäß den Dev Tools) Es scheint also, dass es nichts zu tun gibt, um das jetzt zu beheben.

In Zukunft wird es möglich sein, einzelne Elemente und text-decoration-color CSS-Eigenschaften zu verwenden.