JavaScript - OnMouseOver y OnMouseOut

   
Vista:

OnMouseOver y OnMouseOut

Publicado por Kevin (2 intervenciones) el 03/04/2016 21:04:51
Hola.

Estoy necesitando hacer diría yo, dos usos de OnMouseOver y OnMouseOut a la vez.

Ahora mismo tengo el siguiente código:

1
<a href="/estadisticas.php" onmouseover="this.style.color='#0f9dc1'" onmouseout="this.style.color='#3C3C3C'" class="list-group-item"><span class="glyphicon glyphicon-stats"></span> <img src="/imagenes/textos/estadisticas1.png" onmouseover="this.src='/imagenes/textos/estadisticas2.png';" onmouseout="this.src='/imagenes/textos/estadisticas1.png';"/></a>

Lo que hace es, el OnMouseOver y el OnMouseOut en el link le da y le quita el color al icono de Glyphicon. Y luego, una imagen en donde también cambia de color (son imágenes diferentes) a través de las mismas funciones.

El problema visual que estoy teniendo es que, al pasar por el link, que está dentro de un div junto a otros links, me surge lo siguiente. La imagen tiene un tamaño donde se corta en los bordes de las letras, no tiene espacios en blanco, por lo que si paso el mouse por otra parte del link detecta únicamente el cambio de color del icono (que originalmente es gris):

hzIKw2x

Es decir, para que también se cambie de color las letras debo ir hasta la imagen con el mouse:

clMLFul

¿Me explico? ¿Alguna duda, sugerencia o idea?

Gracias. Un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

OnMouseOver y OnMouseOut

Publicado por txema (25 intervenciones) el 04/04/2016 01:22:15
Hola Kevin:

El código lo veo correcto. Yo revisaría los estilos de class="list-group-item" ... class="glyphicon glyphicon-stats"

Personalmente (aunque tendría que trabajar la imagen incluyendo el texto) cambiaría el código por
1
<a href="/estadisticas.php"><img src="/imagenes/textos/estadisticas1.png" onmouseover="this.src='/imagenes/textos/estadisticas2.png';" onmouseout="this.src='/imagenes/textos/estadisticas1.png';"/></a>

Ignoro el valor que pueda tener
1
<span class="glyphicon glyphicon-stats"></span>

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

OnMouseOver y OnMouseOut

Publicado por Kevin (2 intervenciones) el 04/04/2016 01:28:42
Al hacerlo de esa manera se oculta directamente todo el código, no aparece nada. Espero alguna otra respuesta.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

OnMouseOver y OnMouseOut

Publicado por xve (1595 intervenciones) el 04/04/2016 08:47:36
Como dice txema, faltaria ver el contenido de los estilos glyphicon glyphicon-stats...

revisa este simple ejemplo... hace lo que tu quieres:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
	<meta charset = 'utf-8'/>
	<style>
	.miEnlace:hover {color:blue;}
	.miEnlace span	{display:block;width:200px;border:1px solid;padding:10px;}
	</style>
</head>
 
<body>
	<a href="" class="miEnlace">
		<span>enlace</span>
	</a>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar