Loading ...
The MouseClick Effect With CSS
In this article you will learn about the MouseClick effect and you’ll learn how to use this in your own website or blog. It isn’t too hard to understand and nice to know.
What is a MouseClick effect?
The MouseClick effect is everything you will see when you click on a link item. In JavaScript, this is a piece of cake when you use a property like onMouseClick or onMouseDown. Today, we will try to obtain the same effect using CSS.
We have to style the a:active selector to get the desired effect.
An example
We will begin with a normal, unstyled link. That link has a blue color and a underline, a red color when you have selected the link, a purple color if you have already visited the link. And when you roll your mouse over the link, the underline will be removed.
Just a normal link tag:
1
<a>Link</a>And now the CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
a {
color: #2665aa;
text-decoration: underline;
}
a:hover {
text-decoration: none;
}
a:active {
color: #666666;
}As you can see, it is really simple to change everything via your CSS. Most likely, you already know this. If not, you should read some other articles regarding css which can be found in the CSS tag. Some more in-depth information follows next.
The MouseClick example
To give this technique a real example we use an un-ordered list with preloaded images. Take a look below.
First some basic html, a normal un-ordered list:
HTML:
1 2 3 4 5 6 7 8 9 10 11
<ul>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
<li><a>Item</a></li>
</ul>CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
ul {
list-style: none;
}
ul li {
display: inline;
margin: 0;
padding: 0;
}
ul li a {
float: left;
display: block;
width: 81px;
height: 26px;
color: #333;
text-align: center;
background-image: url(NavigationBackground.png);
background-repeat: none;
background-position: 0 0;
}
ul li a:hover {
background-position: 0 -26px;
color: #cccccc;
}
ul li a:active {
background-position: 0 -52px;
color: #cccccc;
}You’re might ask yourself this question: Where are the different background images?
We actually use only one image to split normal background, hover background and MouseClick background. It is all about positioning that image to show the right background in the right place. The image can be found below:
In the CSS provided to you in the MouseClick example, you will see the different a:selectors getting styled. With the background-position our image gets positioned.
If you want to see a real example regarding the MouseClick effect, please visit the following link.
Conclusion
This effect is a nice little addition to your website, which is easy to use. If you have any more questions, you could contact me via the comments.
Thanks for reading.
Great Job………
It’s very helpful
thanks
I like the hovering effect and I believe I understand how is done. Thanks
I had hard time thinking about this, that’s why I’m here. Please, what is the code to use to enable a drop down menu after I click my mouse?
I am presently doing the layouting of my website. Any help is highly appreciated.
@Yolly – I suggest you take a look at this article: http://www.divitodesign.com/2008/09/how-to-dropdown-css-menu/
The site you pinpointed sir Stefan Vervoort also help me in my dilemma. Thank you for the given direction. Might somehow read in full.
thanks for the input and the link from Stefan Vervoort.
This will help me to build spare eyecatcher for my wiki. In the moinmoin you can add raw-html very simple, but my knowlegde about css isnt deep enough
I have seen a mouse over script, used with CSS. I can’t recall exactly, but it was dealing with some alpha transparency which was set to -1. However what it does was to fade the image on mouse pointer sort of reduced transparency. I can do that in flash, but I want to know if something similar can be done using CSS or java script for that matter. It has to be smooth. Thanks
No problemo.
It is realy nice. You provides some useful tips about css. thanks
Excellent. I always wondered how they do it in navigation menus, now it is all clear like crystal.
I had a similar problem. After I have long tried to solve the problem itself, I Habe after 3 weeks but then it can make from an expert. Had I read this post before, I could have saved a few bucks.
Good you like this.
This is so simple really fantastic code.
But can you able to show after clicking button it has to change to some other color and if i click other button then it is also change the color.How can we acheive it
Yes that is possible. Edit the NavigationBackground.png image to your likings. Colors, styles, sizes, everything is possible. Just use the correct background-position values.
stefan,.. thanks for that Link.
good site for info here.
i come back every month,..
greetings from west germany to all here