Creating A Mouse-Down Link State With CSS
December 19th, 2008
Creating a mouse-down link with CSS is actually quite simple. We going to use a technique that uses the “a:active” link selector. In your CSS simply add “a:active” to your style sheet and assign it some attributes, as shown below:
a:active {
color: #c09;
background-color: #ccc;
padding: 5px;
}
The CSS Explained
Those styles will create a light grey button, with blue text when you mouse-down. The main trick to keep in mind with this technique is to ensure that a:active selector appears after: a, a:link, a:visited, and a:hover. It has to go after those selectors or it will not work. It’s that simple. Check out this technique in use over at . The main navigation uses the a:active technique.
Print This Post
9 Comments on “Creating A Mouse-Down Link State With CSS”
admin
No problem, glad to be of help!
February 17, 2009 » 11:07 am
Thanks. :)
March 3, 2009 » 4:28 pm
Thanks a ton.
The trick worked for me. I was trying to remove the effect of clicking on a menu. Your code help me to locate the CSS which was responsible for the action on mouse click.
Thanks again.
Manpreet.
September 6, 2009 » 2:06 am
admin
awesome! glad to be of service
September 7, 2009 » 9:47 am
Hahaha, I’ve been laughing for about 5 minutes straight just to look at my complex javascripting code that tries to do the same thing you did with CSS!
I use buttons with three states in which pictures are displayed. The javascript ‘style.background=""’ overwrites the CSS setting :hover, in which my button loses the ability to display the hover picture.
For anyone having the same problem and found this page, this is what I did:
the CSS:
div
{
width: 250px;
height: 50px;
background-color: #454653;
}
.about a {display:block;}
.about a:hover {background: url(‘IMG/BTN/about_over.png’);}
.about a:hover img {visibility: hidden;}
.about a:active {background: url(‘IMG/BTN/about_pressed.png’);}
With the HTML:
<a href="CNT/about.html" rel="nofollow">
</a>
Thanks a heap for helping me out with my website!
April 30, 2010 » 10:16 am
No problemo, thanks for reading
April 30, 2010 » 2:22 pm
you rock
thanks..i was tryin this with jquery but u saved me.. some time
thanks for posting.
June 14, 2010 » 7:13 pm
No problem, thanks for reading.
June 14, 2010 » 7:26 pm
John Manoah
Amazing! Just what I wanted to accomplish on the project that I’m working. Thanks a million!
February 17, 2009 » 3:42 am