css - Es: hover: ¿después de ser compatible con IE8?
internet-explorer-8 css-selectors (4)
¿Cómo se ve tu doctor?
IE8 maneja el pseudo-selector, pero si no tiene un tipo de documento estricto, el selector de desplazamiento solo funcionará en los anclajes.
Tengo un menú desplegable donde al final de "Enlaces rápidos" uso el: después del pseudo-elemento en la primera etiqueta LI para mostrar un icono de un archivo de sprite.
El HTML:
<ul class="rs-quick-links-nav">
<li>
<a href="#">QUICK LINKS</a>
<ul>
<li><a href="#">Enhanced Recipe Search</a></li>
<li><a href="#">Recipe Collections & Favorites</a></li>
<li><a href="#">Cooking Tips & Techniques</a></li>
<li><a href="#">Shopping & Storing</a></li>
<li><a href="#">Tools & Products</a></li>
<li><a href="#">New Uses for Old Things</a></li>
<li><a href="#">Guide to Ingredients</a></li>
</ul>
</li>
</ul>
El CSS:
.rs-quick-links-nav { position: absolute; top: 0; right: 20px; }
.rs-quick-links-nav > li { float: left; position: relative; white-space: nowrap; height: 19px; padding: 4px 0 4px 0; }
.rs-quick-links-nav > li > a { color: #999999; display: block; font: normal 1.2em Arial, sans-serif; }
.rs-quick-links-nav > li:after { content: '' ''; background: transparent url(''@static.base@/i/rs-global-sprite.png'') -220px 0 no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav > li > a:hover { text-decoration: none; }
.rs-quick-links-nav > li:hover:after { content: '' ''; background: transparent url(''global-sprite.png'') -220px -20px no-repeat; height: 19px; position: absolute; top: 0; right: -22px; width: 21px; }
.rs-quick-links-nav li ul { background-color: #FFFFFF; border: 4px solid #69b8b8; left: -9999px; padding: 2px 8px; position: absolute; top: 24px; visibility: hidden; z-index: 9900; }
.rs-quick-links-nav li:hover ul { left: auto; right: -18px; visibility: visible; }
.rs-quick-links-nav li li { padding: 2px 0; }
.rs-quick-links-nav li li + li { border-top: 1px dotted #333333; }
.rs-quick-links-nav li li a { color: #666666; display: block; font: normal 1.2em/30px Arial, Verdana, sans-serif; height: 30px; padding: 0px 8px; }
.rs-quick-links-nav li li a:hover { background: #f6f6f6; }
Lo que se supone que ocurre es que cuando pasas el cursor sobre la etiqueta LI, cambio el icono a un color activo.
.rs-quick-links-nav> li: hover: after parece funcionar en Firefox, Chrome y Safari, pero no en IE8 (no me importa nada antes de IE8). Según QuirksMode, IE8 supuestamente admite: hover y: after, así que no estoy seguro de por qué .rs-quick-links-nav> li: hover: after does not work. ¿Alguien tiene alguna idea de cómo hacer que esto funcione (incluso si tengo que hacer algo en Javascript).
EDITAR: DOCTYPE es el doctype HTML5.
<!DOCTYPE html>
EDITAR: JSFiddle fragmento aquí http://jsfiddle.net/tangst/hA7FH/
Al final, tuve que escribir algo de Javascript para controlar el evento "hover" de ese elemento y darle un estilo al elemento de esa manera. No es perfecto en IE8, pero funcionó.
Un par de excelentes opciones:
Usa un calce Esto le permite retroadaptarse (debido a la naturaleza en cascada de css) y corregir problemas de "falta de soporte del navegador anterior". Por ejemplo: http://selectivizr.com/
Use jQuery 1.8.1+ que brinda soporte para este tipo de cosas para navegadores antiguos.
en su :after:hover regla de :after:hover agregar content:""; . esto forzará un redibujado