En este artículo, aprenderemos sobre el selector con el mouse hacia abajo en CSS. El selector de mouse hacia abajo significa el método para detectar si se hace clic en el botón principal del mouse o no. En CSS, la pseudo-clase activa realiza la función del selector hacia abajo del mouse . Podemos agregar esta pseudoclase al selector del elemento para agregar la función del selector del mouse hacia abajo.
activo: esta es una pseudoclase que se utiliza para representar un elemento activado por el usuario. Cuando se usa un mouse, la «activación» generalmente se inicia presionando el botón principal del mouse. En los elementos <a> y <button>, esta pseudoclase se utiliza a menudo.
El enfoque anterior se muestra en el siguiente código donde se cambia el color del texto de la etiqueta de anclaje.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.click {
color: green;
margin-left: 4rem;
margin-top: 3rem;
font-size: 2.5rem;
font-weight: semi-bold;
}
.click:active {
color: red;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
What is the mouse down selector in CSS ?
</h3>
<p style="margin: 2.2rem; margin-top: 2rem;
font-size: 1.5rem">
To change color to red:
</p>
<a class="click">Click on me!!</a>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente código, se cambian varias propiedades cuando se «hace clic» en el elemento.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<style>
.click {
color: green;
margin-left: 6rem;
margin-top: 3rem;
font-size: 2.5rem;
font-weight: semi-bold;
}
.click:active {
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1 style="color: green; margin: 2rem;">
GeeksforGeeks
</h1>
<h3 style="margin: 2.2rem; margin-top: -2rem">
What is the mouse down selector in CSS ?
</h3>
<p style="margin: 2.2rem; margin-top: 2rem;
font-size: 1.5rem">
To change background to black
and color to white:
</p>
<a class="click">Click on me!!</a>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyanshuchatterjee01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA