CSS :hover Selector: El :hover selector (o pseudoclase CSS) coincide cuando el usuario interactúa con un elemento con un dispositivo señalador. Por lo general, se activa cuando el usuario pasa el cursor sobre un elemento (puntero del mouse) .
Acercarse:
-
1: Todas las etiquetas de anclaje están dirigidas con las declaraciones CSS (entre llaves) al pasar el cursor del mouse.
Sintaxis:
a:hover { css declarations; } -
2: Las etiquetas con el nombre de clase «icono» se han seleccionado para cambiar su color de fondo a azul, al pasar el cursor del mouse.
Sintaxis:
.icon:hover { background-color: blue; } -
3: El elemento objetivo con el ID «objetivo» se transformará a una escala de 1,5 al pasar el cursor por encima. Consulte la escala CSS
Sintaxis:
#target:hover { transform: scale(1.5); }
Para hacer que nuestro hover sea más atractivo y decorativo, también podemos agregarle transiciones CSS .
Ejemplo: hemos utilizado el selector :hover y una combinación de varios CSS para crear un efecto de desplazamiento en los íconos de las redes sociales. Este proyecto seguramente lo ayudará a comprender el efecto de desplazamiento a un nivel más profundo.
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<script src=
"https://kit.fontawesome.com/457a315592.js"
crossorigin="anonymous">
</script>
<style>
.container {
background-color: green;
height: 20vh;
display: flex;
justify-content: center;
align-items: center;
}
.link {
height: 70px;
width: 70px;
background-color: #caf7e3;
border-radius: 35px;
text-align: center;
margin: 7px;
line-height: 80px;
}
a i {
transition: all 0.3s linear;
}
a:hover i {
transform: scale(1.5);
}
.youtube:hover {
color: red;
}
.facebook:hover {
color: blue;
}
.instagram:hover {
color: #e11d74;
}
.twitter:hover {
color: #00adb5;
}
.github:hover {
color: black;
}
.linkedin:hover {
color: #04009a;
}
</style>
</head>
<body>
<p>GFG social media link icons (Hover over the icon)</p>
<div class="container">
<a class="link linkedin">
<i class="fab fa-2x fa-linkedin"></i>
</a>
<a class="link twitter">
<i class="fab fa-2x fa-twitter"></i>
</a>
<a class="link github">
<i class="fab fa-2x fa-github"></i>
</a>
<a class="link instagram">
<i class="fab fa-2x fa-instagram"></i>
</a>
<a class="link youtube">
<i class="fab fa-2x fa-youtube"></i>
</a>
<a class="link facebook">
<i class="fab fa-2x fa-facebook-f"></i>
</a>
</div>
</body>
</html>
Producción:
