|
In this article, we are going to learn about the mouse-down selector in CSS. The mouse-down selector means the method to detect whether the primary mouse button is clicked or not. In CSS, the function of the mouse-down selector is done by the active pseudo-class. We can add this pseudo-class to the selector of the element to add the mouse-down selector’s function.
active: This is a pseudo-class that is used to represent a user-activated element. When using a mouse, “activation” is usually initiated by pressing the primary mouse button. On <a> and <button> elements, this pseudo-class is often utilized.
Example: In this example, we are using the above-explained approach, in which the color of the text of the anchor tag is changed.
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>
|
Output:
Example 2: In the below code, multiple properties are changed when the element is “clicked”.
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>
|
Output:
|
