Pseudoclase :hover de CSS

Definición y uso

CSS :hover Los pseudoclases se utilizan para seleccionar elementos al pasar el ratón por encima.

Consejo::hover Los pseudoclases se pueden usar para todos los elementos, no solo para los enlaces.

Consejo:Utilice :link Configurar el estilo de los enlaces de la página no visitada, usar :visited Configurar el estilo de los enlaces de la página visitada, usar :active Configurar el estilo de los enlaces activos.

Nota:En la definición de CSS,:hover debe colocarse :link y :visited¡sólo puede entrar en vigor después de que (si existe)!

Ejemplo

Ejemplo 1

Seleccione y configure el estilo de los enlaces al pasar el ratón por encima:

a:hover {
  color_de_fondo: amarillo;
  font-size: 18px;
}

Prueba por ti mismo

Ejemplo 2

Seleccione y configure el estilo de los elementos <p>、<h1> y <a> al pasar el ratón por encima:

p:hover, h1:hover, a:hover {
  color_de_fondo: amarillo;
}

Prueba por ti mismo

Ejemplo 3

Elegir y establecer estilos para enlaces no visitados, visitados, al pasar el ratón y activos:

/* Enlace no visitado */
a:link {
  color: verde;
}
/* Enlace visitado */
a:visited {
  color: verde;
}
/* Enlace con ratón sobre él */
a:hover {
  color: rojo;
}
/* Enlace activo */
a:active {
  color: amarillo;
}

Prueba por ti mismo

Ejemplo 4

Establecer diferentes estilos para los enlaces:

a.ex1:hover, a.ex1:active {
  color: rojo;
}
a.ex2:hover, a.ex2:active {
  tamaño_de_letra: 150%;
}

Prueba por ti mismo

Ejemplo 5

Pasa el ratón sobre el elemento <span> para mostrar el elemento <div> (simil a un tooltip):

div {
  mostrar: none;
}
span:hover + div {
  mostrar: bloque;
}

Prueba por ti mismo

Ejemplo 6

Mostrar y ocultar el menú desplegable al pasar el ratón:

ul {
  mostrar: inline;
  margen: 0;
  relleno: 0;
}
ul li {mostrar: bloque-inline;}
ul li:hover {fondo: #555;}
ul li:hover ul {mostrar: bloque;}
ul li ul {
  posición: absoluta;
  ancho: 200px;
  mostrar: none;
}
ul li ul li {
  fondo: #555;
  mostrar: bloque;
}
ul li ul li a {mostrar: bloque !important;}
ul li ul li:hover {fondo: #666;}

Prueba por ti mismo

Sintaxis CSS

:hover {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la pseudoclase.

páginas relacionadas

Tutoriales:enlaces CSS

Tutoriales:pseudoclases CSS