problemas con a:hover en IE6

[luis_carlos]

Hola a todos, tengo un problema con una página en IE6, el html es el siguiente:

Código HTML:

<td rowspan="3" class="ContentNewsDetail NewsList" valign="top" style="width:645px">						
      <h3>2009</h3><br />
      <a href="#">                        
            <h1>Title</h1>
            <h2>Date - location</h2>
            <p>content...</p> 
      </a>
</td> 

y el css:

Código HTML:

<style type="text/css">
.NewsList a:hover{
		text-decoration:none;
	}
		.NewsList a:hover p{
			color:#0082B4;
		}
		.NewsList a:hover h1{
			color:#FF6600;
		}
		.NewsList a:hover h2{
			color:#8C8D8E;
		}
</style> 

Lo que quiero es que al pasar el cursor sobre el link el p, h1 y el h2 cambien de color, pero no me funciona en IE6, solo cambia de color cuando hago click sobre el enlace.
Me pueden dar una mano por favor
Gracias.

[Nathan_1979]

Una lastima...

IE 6 lo de las multiples clases no lo lleva bién. ( por no decir que no las soporta )

[luis_carlos]

Gracias por contestar.
Alguna sugerencia...

[Nathan_1979]

Pues tienes 3 opciones:

1.- Que I.E 6 te la traiga al fresco... ( Caso que estoy contigo, a veces pienso que no aprovechamo la potencia de las clases, selectores y demás por culpa de navegadores cómo es este.

2.- Buscar Información por Internet acerca de cómo poder solucionar este problema ( lei algo de jquery --> libreria muy fácil de usar de javascript )

3.- No utilizar clases multiples.


Saludos.

[Mikmoro]

Habría que ver el resto de tu código HTML, porque el fragmento que pones debería funcionar en IE6.

Mira: ejemplo

[luis_carlos]

Gracias, voy a revisar, creo que tengo problemas con los links visitados.

[kaninox]

has probado usar onmouseover() onmouseout() con javascript?

[Aresillo]

Iniciado por kaninox

has probado usar onmouseover() onmouseout() con javascript?

Sería esto accesible??

Ares

[webosiris]

puede ser que no te funcione porque tenes un problema con tu html... un A no puede contener ni a un H1 ni a un P, pues A es un elemento en linea y el resto de elementos que pusistes, son elementos en bloque (amén que si es una tabla con datos de libro/fecha/contenido, deberías usar una celda para cada item)

[codecweb98]

Para IE intentaría lo siguiente.

Código HTML:

<td rowspan="3" class="ContentNewsDetail NewsList" valign="top" style="width:645px">						
      <h3>2009</h3><br />
      <div class="efecto">                        
            <h1>Title</h1>
            <h2>Date - location</h2>
            <p>content...</p> 
      </div>
</td> 

Código HTML:

<style type="text/css">
	.efecto:hover p
		{
		color:#0082B4;
		}

	.efecto:hover h2
		{
		color:#8C8D8E;
		}

	.efecto:hover h1
		{
		color:#FF6600;
		}
</style> 

Dentro de un elemento <a> no es posible poner <p>, <h1> o <h2>. Por lo tanto tu código HTML es incorrecto, pero: según IE soporta ":hover" en elementos que no son forzosamente <a>. Pero esto en FireFox u otros exploradores no jalaría.

Espero sirva.

[webosiris]

Iniciado por codecweb98

IE soporta ":hover" en elementos que no son forzosamente <a>. Pero esto en FireFox u otros exploradores no jalaría.

es totalmente a la inversa... es IE 6 el que no soporta :hover en otra cosa que no sea A (se soluciona con esto).... cualquier otro navegador si lo soporta.

[codecweb98]

webosiris: tienes toda la razón. -Disculpen- Corrijo: IE 7 y Firefox, si soportan esto IE 6 no.

[dmomentor]

quede con la duda por qeu un A no puede contener ni un H1 ni un p aluien puede explicame los motivos

[kseso?]

porque los elementos que por naturaleza son de línea (display: inline) no pueden alojar en su interior a los que son bloques (display: block).