¿Cambiar el color de subrayado con css no funciona en cromo?

Question

Estoy tratando de cambiar el color de subrayado durante un evento de desplazamiento usando espacios y funciona en IE9 y Firefox 13.01 pero no funciona en Chrome (debe subrayarse en oro).

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

Aquí es js.fiddle: http://jsfiddle.net/wuUpL/7/.

Originalmente obtuve la idea de esta publicación https://stackoverflow.com/a/1175402/1490248 pero esa tampoco funciona en Chrome.

Nota: No quiero utilizar las fronteras de solucionar este problema, ya estoy usando fronteras como frontera

¿Puede alguien ayudarme aquí? ¿Hay algún tipo de hack/excepción de Chrome que pueda usar para solucionar esto?

Answer 1

Sé que dijiste que no querías usar bordes aquí, pero has encontrado algo que no funciona igual entre los dos buscadores.

Puede hacer que esto funcione en Chrome agregando un tramo interno y usando un borde en él.

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

Lo siento si no es lo que tenía en mente, pero Gecko y WebKit no está de acuerdo con algo aquí!

Answer 2

Tal vez vale la pena señalar que generalmente configuración diferente color de texto principal y secundario para obtener subrayado de color diferente funciona incluso en Chrome. Pero hay algo de extraño error en enlace decoración herencia en 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>

Lo que es extraño es que los dos elementos más íntimos tienen exactamente el mismo estilo computado en Chrome (de acuerdo con las Herramientas de desarrollo) , así que parece que no hay nada que hacer para arreglar eso ahora.

En el futuro, será posible usar un único elemento y text-decoration-color propiedad CSS.