CSS on mouse down event.

CSS on Mouse Down

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

Use the :active CSS pseudo-class to style an element when the user presses down the left or primary mouse button.

Syntax

<element>:active {css-style}

Example 1

Changing the color of a link on mouse down:

a:active {color: red;}

Output

Click the following link and you will notice that on mouse down it will turn red. Test me

Example 2

Change the background color of a paragraph on click:

p:active {background-color: #eee;}

Output

Click on this paragraph and on mouse down its background color will change to light gray.
This is another line.

Reference

CSS - :active

Related Tutorials