Foros del Web » Programando para Internet » Javascript »

Problema con onMouseOver sobre un div en IE

Estas en el tema de Problema con onMouseOver sobre un div en IE en el foro de Javascript en Foros del Web. Buenas Tengo un div con una imagen y un texto. Cuando se pasa el ratón por encima del div con un evento javascript sencillo de ...
  #1 (permalink)  
Antiguo 21/12/2008, 10:02
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 18 años, 6 meses
Puntos: 14
Problema con onMouseOver sobre un div en IE

Buenas

Tengo un div con una imagen y un texto.
Cuando se pasa el ratón por encima del div con un evento javascript sencillo de onMouseOver y onMouseout hago que la opacidad cambie, que sea 100% cuando se pasa el ratón por encima y 60% cuando está fuera.

Funciona a la perfección en el Firefox, pero en el Internet Explorer, a pesar de que he aplicado el filtro correspondiente si no me equivoco, el fecto funciona A MEDIAS.

Cuando paso el ratón por encima del texto del div, se ilumina, pero si pongo el ratón entre lina de texto y linea de texto, deja de iluminarse, es como si estuviera onMouseOut.
Esto acaba creando un efecto intermitente de iluminación cuando se pasa el ratón por encima del texto o entre el texto y la imagen.

¿por qué pasa eso?
¿tiene solución?

Aquí dejo la página de ejemplo para no poner todo el código, podéis notar la diferencia si la véis con los 2 exploradores, firefox e IE:
Link aquí

Y dejo aquí un cachito de código :) El comienzo del div.
Código HTML:
<div class="cuerpoNoticia" style="filter:alpha(opacity=60);Moz-opacity:.60;opacity:.60" onmouseover="pointer(this);this.style.MozOpacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.MozOpacity=0.5;this.filters.alpha.opacity=50"> 
  #2 (permalink)  
Antiguo 21/12/2008, 10:46
Avatar de Panino5001
Me alejo de Omelas
 
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años
Puntos: 834
Respuesta: Problema con onMouseOver sobre un div en IE

Probá así:
Código PHP:
<div class="cuerpoNoticia" style=" background-color:#000;filter:alpha(opacity=60);Moz-opacity:.60;opacity:.60; zoom:1; line-height:25px" onmouseover="pointer(this);this.style.opacity=1;this.style.filter='alpha(opacity=100)';" onmouseout="this.style.opacity=.5;this.style.filter='alpha(opacity=50)';">En el v&#237;deo que podéis ver sobre estas líneas (que nos ha enviado nuestro compañero de Xatakafoto Manolo Toledo) podemos escuchar la opinión de Javier Cañada, un experto en usabilidad que tiene las cosas bastante claras a la hora de elegir entre un iPhone o una BlackBerry Storm.

Seg&#250;n Javier, el simple hecho de que Apple se ocupe del diseño y la programación del su teléfono desde sus primeros bocetos
</div
(agregué background-color y zoom para explorer y cambié la forma en que declarás los filtros para que no dispare errores en otros navegadores que no sean explorer)
  #3 (permalink)  
Antiguo 21/12/2008, 10:52
Avatar de salbatore  
Fecha de Ingreso: abril-2007
Ubicación: Springfield
Mensajes: 1.567
Antigüedad: 17 años, 1 mes
Puntos: 19
Respuesta: Problema con onMouseOver sobre un div en IE

Hola, IMAC/!

He probado tu codigo en varios navegadores. Como dices en IE no funciona bien pues salta cuando te situas sobre el texto, pero como en Safari no me funcionaba el alpha lo he hecho todo de nuevo... jeje. Asi que he mirado un poco... y de este modo te funciona en todas partes:

Código HTML:
<style>
	.uno 
		{
			width: 500px;
			height:200px;
			/* Propiedades de Opacidad */
				opacity: .5; /* Firefox, Opera, Safari... */
				filter: alpha(opacity=50); /* IE */
				-moz-opacity: .5; /* Mozilla */
		}
	.dos 
		{
			width: 500px;
			height: 200px;
			/* Propiedades de Opacidad */	
				opacity: none; /* Firefox, Opera, Safari... */
				filter: none; /* IE */
				-moz-opacity:none; /* Mozilla */
		}
</style>

<div class="uno" onmouseover="this.className='dos'" onmouseout="this.className='uno'">
	Esperemos que me ilumine cuando te poses en mi!. :)<br />
	Y lo mismo en este parrafo... esperemos que tambien funcione en el siguiente<br />
	Funciona?... jeje.
</div> 
Lo he probado en pc(Firefox e Internet Explorer) y en mac(Safari, Firefox y Opera)...

Espero que te sirva.. jeje.

Hasta otra!

PD: ups... Panino5001 fue mas rapido, jeje... fiate mejor de él, que sabe más!, jeje.

Última edición por salbatore; 21/12/2008 a las 11:01
  #4 (permalink)  
Antiguo 21/12/2008, 11:18
Avatar de IMAC/  
Fecha de Ingreso: octubre-2005
Mensajes: 738
Antigüedad: 18 años, 6 meses
Puntos: 14
Respuesta: Problema con onMouseOver sobre un div en IE

¡¡¡Muchas gracias a los 2!!!!

Funciona sin ningún problema ;)
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 06:12.