entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

OnMouseOver y OnMouseOut

Hola.

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

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).
Es decir, para que también se cambie de color las letras debo ir hasta la imagen con el mouse.

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

Gracias. Un saludo.

0voto

Peter comentado

¿Porque quitaste el código?

1 Respuesta

3votos

Leonardo-Tadei Puntos227020

Hola Kevin,

estás usando la tecnología equivocada.

Para hacer lo que te hace falta, usá CSS, puntualmente la pseudoclase :hover

http://www.w3schools.com/cssref/sel_hover.asp

Saludos cordiales

0voto

Leyes comentado

Gracias por tu respuesta. Creí haber leído eso antes, pero ahora mismo tengo un lío que ya realmente no entiendo bien este tema. No sé cómo tendría que adaptar esto mismo a mi situación y mi código. Es algo confuso. Ya tengo previamente un class en el link, ¿cómo puedo adaptar esto y qué CSS tendría que usar más o menos?

Un saludo.

3votos

Leonardo-Tadei comentado

Hola @KevinLeyes,

en el enlace hay varios ejemplos.

Sería algo como:

<a href="/estadisticas.php" class="list-group-item cambio-de-color"><span class="glyphicon glyphicon-stats"></span> <img src="/imagenes/textos/estadisticas1.png"/></a>

y en el CSS:

.cambio-de-color{
   color: #3C3C3C;
}
.cambio-de-color:hover{
   color: #0f9dc1;
}

Incluso con todo esto, podrías poner la palabra "estadísticas" como texto decorado, y aplicarle el estilo sin necesidad de cambiar ninguna imagen.

Si por algún motivo te hace falta que la palabra sea una imagen, tendrías que definirle un tamaño al A y poner la imagen de fondo, para luego en el HOVER cambiar la imagen de fondo por otra... pero siempre es mejor y más eficiente que el texto sea texto.

Saludos!

0voto

Leyes comentado

Muchas gracias, conseguí hacerlo. Desde un principio debí hacer todo en forma de texto. A partir de ahora así será, supongo que me ahorrará bastante tiempo y problemas.

Un saludo.

1voto

Leonardo-Tadei comentado

No sólo et ahorrará tiempo y problemas, sino que además se gana en la flexibilidad a la hora d eun cambio y en posicionamiento en los buscadores, ya que estos pueden indexar texto pero no lo que se dice en una imagen.

Saludos!

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta