La pseudoclase CSS :hover selector se utiliza para diseñar elementos cuando se pasa el mouse sobre ellos. Se puede utilizar en todos los elementos.
Podemos diseñar los enlaces para las páginas no visitadas usando el :selector de enlaces , para diseñar los enlaces a las páginas visitadas, use el :selector visitado y para diseñar el enlace activo, use el :selector activo . Si los selectores :link y :visited están presentes en la definición de CSS, para ver el efecto, debemos agregar :hover selector después.
Sintaxis:
element :hover{
// CSS declarations;
}
Ejemplo 1: Este ejemplo ilustra el cambio del color de fondo al pasar el mouse sobre un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
color: white;
background-color: green;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
Producción:
Ejemplo 2: este ejemplo muestra un bloque oculto al pasar el mouse sobre el texto.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
ul {
display: none;
}
div {
background: green;
width: 200px;
height: 200px;
padding: 20px;
padding-left: 50px;
font-size: 30px;
color: white;
display: none;
}
h3:hover + div {
display: block;
}
</style>
</head>
<body>
<h3 align="center">
Hover to see hidden GeeksforGeeks.
</h3>
<div> GeeksforGeeks </div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo ilustra el cambio del color de la fuente al pasar el mouse sobre un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
color: red;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
Producción:
Ejemplo 4: Este ejemplo ilustra el cambio de la familia de fuentes de texto al pasar el cursor sobre él.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
font-family: monospace;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
Producción:
Ejemplo 5: Este ejemplo ilustra el cambio de la decoración de texto para subrayar al pasar el mouse sobre un elemento.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
h1:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1 align="center"> hover it</h1>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0 y superior
- Microsoft Edge 12.0 y superior
- Mozilla Firefox 1.0 y superior
- Internet Explorer 4.0 y superior
- Safari 2.0 y superior
- Ópera 4.0 y superior
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA