Press "Enter" to skip to content

CSS on Mouse Down

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

Vinish Kapoor

I am a full stack developer and writing about development. I document everything I learn and help thousands of people. foxinfotech.in is created, written, and maintained by me, it is built on WordPress, and hosted by Bluehost. Connect with me on Facebook, Twitter, GitHub and get notifications for new posts.

You may also like:

Comments are closed.