Foros del Web » Creando para Internet » CSS »

No me funciona hover en IE

Estas en el tema de No me funciona hover en IE en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/06/2008, 06:01
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 18 años, 5 meses
Puntos: 2
No me funciona hover en IE

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?
  #2 (permalink)  
Antiguo 25/06/2008, 08:23
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 1 mes
Puntos: 772
Respuesta: No me funciona hover en IE

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,
  #3 (permalink)  
Antiguo 25/06/2008, 09:07
 
Fecha de Ingreso: junio-2008
Mensajes: 14
Antigüedad: 15 años, 9 meses
Puntos: 0
Respuesta: No me funciona hover en IE

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;
     
_iehack1expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));
     
_iehack2expression(this.onmouseout = new Function("this.className=_iehack;"));

.
table3 .even {

     
background-color#EFF;
     
_iehack1expression(this.onmouseover = new Function("_iehack=this.className;this.className+=' hover';"));
     
_iehack2expression(this.onmouseout = new Function("this.className=_iehack;"));

}

.
table3 .even:hover,.table3 .odd:hover, .table3 .even.hover,.table3 .odd.hoverbackground-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 .oddHoverbackground-color#CFC;} 
Estoy escribiendo de memoria, así que puede haber fallos de escritura, si es así sorry pero es que estoy en el trabajo ;)
  #4 (permalink)  
Antiguo 25/06/2008, 09:31
 
Fecha de Ingreso: noviembre-2006
Mensajes: 2
Antigüedad: 17 años, 4 meses
Puntos: 0
Respuesta: No me funciona hover en IE

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&oacute;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
  #5 (permalink)  
Antiguo 25/06/2008, 10:19
 
Fecha de Ingreso: octubre-2005
Mensajes: 53
Antigüedad: 18 años, 5 meses
Puntos: 2
Respuesta: No me funciona hover en IE

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;}
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 04:17.