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.