> Faqs > Cómo hacer enlaces que cambian al pasar el ratón por encima

Cómo hacer enlaces que cambian al pasar el ratón por encima

Tengo un pequeño problema a la hora de realizar un hipervinculo con unas pequeñas características.

A ver: tengo un texto normal fuente verdana y colo azul que cuando pase el raton por encima me gustaría que se pusiera de color rojo y que no tuviese subrayado, a la vez cuando haga click que vaya a otra página, sabeis por donde puedo tirar para informarme sobre esto?

Respuestas

Lo que tú buscas es el pseudo-selector :hover que pertenece a las CSS y sirve para cambiar el estilo de un elemento cuando se pasa el cursor del ratón sobre él.

Te paso un ejemplo básico de cómo se puede usar este pseudo-selector.

Esto sería un botón HTML:

<button class="myButton">Presioname!</button>

Ahora podrías tener una serie de estilos CSS definidos para el botón en general, por ejemplo:

.myButton {
    background-color: blue;
    color: white;
    border: none;
    padding: 15px 32px;
    font-size: 16px;
    cursor: pointer;
}

.myButton:hover {
    background-color: red;
    color: yellow;
}

El estilo CSS lo hemos puesto sobre la clase .myButton que tiene el botón. El botón tiene el color de fondo azul y el texto blanco.

Además hemos puesto el :hover para conseguir que, cuando pasas el cursor sobre el botón , el color de fondo cambia a rojo y el color de texto a amarillo.

Si quieres puedes cambiar cualquier propiedad de CSS dentro del bloque :hover, no solo el color del elemento. Podrías poner negritas, cambiar la posición de los elementos, los márgenes, etc. Pero no te pases porque resultará un efecto demasiado molesto... estos cambios deben de ser sutiles y simplemente para indicar algo al usuario, como que sea un elemento pulsable.

Gustavo
181 5 12 11