: la pseudoclase de CSS no funciona en IE7

Question

Tengo un problema con la pseudo clase de CSS :hover.

lo estoy usando como

tr.lightRow:hover { 
    color:red 
} 

Funciona en Safari y Firefox, pero no funciona en IE7. Por favor, ayúdame.

Answer 1

IE7 admite: desplace el mouse, al menos en modo estándar. Puede que no en el modo peculiar.

Answer 2

: el elemento emergente no es compatible con todos los elementos, p. funciona en <a> pero se rompe en <div> afaik

Answer 3

IE tiene un historial de compatibilidad con CSS incorrecto. Originalmente solo las etiquetas a compatibles con :hover. Y tampoco podría tener algo como a:hover span para indicar que solo la etiqueta span debería cambiar al pasar el elemento primario a.

Si desea la funcionalidad correcta de :hover en todas las versiones de IE, necesita usar javascript y onmouseover/onmouseout.

También ayuda si utiliza un doctype xhtml para habilitar el modo estándar.

Answer 4

he topado con esto unas cuantas veces - echar un vistazo al siguiente enlace ..

http://www.bernzilla.com/item.php?id=762

"si quieres soporte para: flotar sobre todos los elementos y no sólo el <un> etiqueta, asegúrese de estar usando un DOCTYPE estricto para que IE7 no se inicie en el modo peculiar ".

Answer 5

IE 6 solo admite la pseudo clase :hover en los enlaces, pero IE 7 la admite en la mayoría de los elementos.

Como mencionó David, podría no funcionar en modo peculiar. La razón sería entonces que IE principalmente vuelve a ser algo más parecido a IE 4 en modo peculiar, lo que permite muchas características específicas de IE y elimina varias características que cumplen con los estándares.

Si desea la funcionalidad :hover en un elemento de bloque y la compatibilidad con IE 6, puede usar un elemento de enlace y convertirlo en un elemento de bloque mediante CSS. Tenga en cuenta que un enlace sólo puede contener elementos en línea (por ejemplo, no div s) así que si quieres bloquear elementos dentro del enlace que tendría que establecer que el uso de CSS también:

CSS:

.hoverlink { display: block; } 
.hoverlink:hover { background: #eee; } 
.hoverlink .item { display: block; } 

HTML:

<a href="..." class="hoverlink"> 
    <span class="item">Line 1</span> 
    <span class="item">Line 2</span> 
    <span class="item">Line 3</span> 
</a> 

(es posible que desee considerar el impacto en los motores de búsqueda utilizando la técnica también. Un enlace tiene un mejor impacto si sólo contiene el texto que describe lo que se vincula a.)