No me funciona hover en IE

-Hercules- · #1 (**permalink**) 25/06/2008, 06:01

Hola,

Estoy haciendo un estilo para mostrar las tablas de forma más visual, pero con Internet Explorer 6.0 sp2 no me funciona bien el comando hover. Es decir que cuando situo el ratón encima del objeto no aplica el nuevo estilo. Con varias versiones del Opera y Firefox no me da ningún problema.

En la hoja de estilo tengo definida la siguiente clase:

Código:

.table3{ border: #000000; border-width:1px 2px 2px 1px; border-style:solid; margin:auto; padding: 0px; background-color: #EEFCFF;}
.table3 .odd{ background-color: #DDEEFF}
.table3 .even{ background-color: #EFF;}
.table3 .even:hover,.table3 .odd:hover{ background-color: #CFC;}

Y un ejemplo en html de la tabla que no me funciona es:

Código:

 
<?xml version="1.0" encoding="iso-8859-15"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<title>prueba</title>
	<link rel="stylesheet" type="text/css" href="css/style1.css" title="style1"/>
</head>
<body>
<table border='1' cellpadding="5" cellspacing="0" class="table3">
	<tr><th> Sesi&oacute;n </th><th> Grupo </th></tr>
		<tr class="even"><td>12345_001</td><td>1111</td> </tr>
		<tr class="odd"><td>12345_001</td><td>1159</td></tr>
</table>
</body></html>

¿ que es lo que estoy haciendo mal? o ¿se tiene que definir de forma diferente la clase table3 para que funcione con IE?

JavierB · #2 (**permalink**) 25/06/2008, 08:23

Hola -Hercules-

En IE 6 :hover sólo funciona con los enlaces. Echa un vistazo a este artículo:

http://www.maestrosdelweb.com/actual...os-estandares/

Saludos,

FatalError · #3 (**permalink**) 25/06/2008, 09:07

Como te comentan IE6 no acepta el método "hover".

Hay una solución que he usado en alguna ocasión pero es un poco "marrana" y no me gusta nada:

Código PHP:

   
.table3 .odd {

 
     background-color: #DDEEFF;

     _iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));

     _iehack2: expression(this.onmouseout = new Function("this.className=_iehack;"));

 
.table3 .even {

 
     background-color: #EFF;

     _iehack1: expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));

     _iehack2: expression(this.onmouseout = new Function("this.className=_iehack;"));

 
}

 
.table3 .even:hover,.table3 .odd:hover, .table3 .even.hover,.table3 .odd.hover{ background-color: #CFC;}

Forzamos las expresiones .hover al estilo y las definimos como un estilo.

---------

Aunque lo mejor es que asignes estilos usando Javascript:

Asigna una id a las filas, por ejemplo "fieldOdd" y "fieldEven":

Dentro del head:

Código PHP:

  <script language="javascript">

window.onload = iniTable;

</script>

Enlaza a una libreria en Javascript que contenga:

Código PHP:

  function styleOddHover (event) {

    document.getElementById("fieldOdd").className = "oddHover";

}

 
function styleEvenHover (event) {

    document.getElementById("fieldEven").className = "evenHover";

}

 
function styleOdd (event) {

    document.getElementById("fieldOdd").className = "odd";

}

 
function styleEven (event) {

    document.getElementById("fieldEven").className = "even";

}

 
function iniTable () {

    document.getElementById("fieldOdd").onmouseover = styleOddHover;

    document.getElementById("fieldEven").onmouseover = styleEvenHover;

    document.getElementById("fieldOdd").onmouseout = styleOdd;

    document.getElementById("fieldEven").onmouseout = styleEven;

}

Añade el estilo:

Código PHP:

  .table3 .evenHover, .table3 .oddHover{ background-color: #CFC;}

Estoy escribiendo de memoria, así que puede haber fallos de escritura, si es así sorry pero es que estoy en el trabajo ;)

alemasar · #4 (**permalink**) 25/06/2008, 09:31

Hola

Hay otra solución, tambien muy marrana, que és poner un enlace en el tr.

O sea algo del estilo,

<table border='1' cellpadding="5" cellspacing="0" class="table3">
<tr><th> Sesión </th><th> Grupo </th></tr>
<a href="#" class="even"><tr class="even"><td>12345_001</td><td>1111</td> </tr></a>
<a href="#" class="odd"><tr class="odd"><td>12345_001</td><td>1159</td></tr></a>

</table>

En esta dirección montan unos menus desplegables solo con css, però la idea es la misma.
http://http://www.luisangelcamargo.com/?p=31

Salutaciones

-Hercules- · #5 (**permalink**) 25/06/2008, 10:19

Hola,

Gracias a todos por vuestra ayuda ;)

He probado el script IE7.js y con esto funciona el lo del hover. Incluso mejora la compatibilidad con el atributo margin. Aunque no se el por que, pero me neutraliza otro estilo que tenía.

En la primera linea de la tabla, la tengo declarada así:

Código HTML:

<tr class="title4 center"> <th>Sessi&oacute;n </th><th> Grupo </th></tr>

Donde title4 y center son clases declaradas de la hoja de estilo:

Código:

.center{text-align: center;  margin: auto; clear:both;}
.title4{background-color: #5CE;font-size: 105%; margin:0px 0px 0px 0px; padding:0.1em 0.1em 0.1em 0.1em;}