CSS onclick

CSS
#cssonclickswitch {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#cssonclickswitch li {
width:50px;
}
#cssonclickswitch a {
display: block;
width:50px;
color: #000;
text-decoration:none;
text-align:center;
}
#cssonclickswitch a img {
border:0;
}
#cssonclickswitch a:hover,
#cssonclickswitch a:focus:hover {
color: #cff;
background:black;
}
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}
#cssonclickswitch a span {display: none;}
#cssonclickswitch a:active span,
#cssonclickswitch a:focus span {
display: block;
position: absolute;
top: 0;
left: 170px;
width: 50px;
color:red;
background:#fff;
}
HTML
<h1>CSS onclick</h1>
<ul id="cssonclickswitch" class="cfix">
<li><a href="#n">Wine<span><img src="wine.jpg" alt="wine" height="50" width="50"></span></a></li>
<li><a href="#n">Beer<span><img src="beer3.jpg" alt="beer" height="50" width="50"></span></a></li>
<li><a href="#n">Whisky<span><img src="whisky.jpg" alt="whisky" height="50" width="50"></span></a></li>
</ul>

Comments

#1
2006-08-24 Samantha says :

Great tutorial! Is it possible to have the active nav selection indicated? (for example, the word "wine" is a different color when the wine picture is displayed?)
Thanks!

#2
2006-08-24 BonRouge says :

Samantha,
I just added these lines:#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}

#3
2006-08-24 Samantha says :

Perfect, that is exactly what i wanted! I have one more question, and this will be the last, I swear! How do I make the first image show up when the page loads - and have the images not dissappear when you click on them? (For ex. if you click on the wine pic, it becomes a blank space again). Thank you so much for taking the time to help me.

#4
2006-08-25 BonRouge says :

That's the drawback of using CSS for this kind of thing. I think you should probably use javascript for what you want to do. There's an example here.

#5
2006-10-03 Jollymon says :

What are the style attributes of the class: cfix that you make reference to in the UL tag?

#6
2006-10-04 BonRouge says :

The .cfix class on this page looks like this:.cfix:after {
content: ".";
display: block;
height: 0;
overflow:hidden;
clear: both;
visibility: hidden;
}

/* Hides from IE Mac \*/
* html .cfix {height: 1%;}
.cfix{display:block;}
/* End Hack */

It comes from CSS Creator and is used to contain the floats. I've actually never seen any problem when I've used only this:.cfix:after {
content: " ";
display: block;
clear: both;
overflow:hidden;
}

#7
2006-12-22 Harrie says :

Nice tutorial, I've bookmarked your site for further reference, thx.

This is almost exactly what I want for a page I'm currently writing, but I would like to toggle a condition with an "onclick" event. Something like:

display pic of beer when beer is clicked
remove pic of beer when beer is clicked again
display pic of beer when beer is clicked
enz ..

Is this posible? I'm starting to believe it's not ..

#8
2006-12-22 BonRouge says :

Did you see this page?

#9
2006-12-26 Harrie says :

Not before, no, but I just checked it out, thx.

Sorry, I forgot to mention that I want a HTML/CSS only solution. Can some HTML element (or XML element) be toggled with CSS only?

#10
2006-12-27 BonRouge says :

Harrie,
An 'onclick' event is javascript. I think what you're asking for is not currently possible with CSS alone.

#11
2006-12-28 Harrie says :

Thanks for your feedback, BonRouge, I appreciate it.

Yes, I know "onclick" is a (java)script event, but your "cssonclickswitch" was so close to it (for what I want), that I hoped that it could be done through CSS.

Do you know if CSS level 3 will support something like what I want? I mean, (as an example) HTML's "onmouseover" (script event) is so close to CSS's dynamic pseudo-class ":hover" that it should, at least theoretical, be possible.

I haven't read the CSS level 3 Specification yet, it's not a recommendation yet, I'll do that in the coming days. If I find something I like, I'll leave the URL to it here, ok?

#12
2006-12-29 BonRouge says :

Harrie,
No, this isn't in the CSS3 specs. There is no harm in reading them if you have some free time.
I think the closet thing we have is ':target'

#13
2007-01-14 Kolt says :

Is there a possibilty to do this together with an <map><area shape="rect" coords="361,526,684,555" href="#n" alt="" /></map> ? can't find it..

#14
2007-01-15 BonRouge says :

Kolt,
No, I don't know how you would do that.

#15
2007-01-19 Kolt says :

Thnx anyway.. ;)

#16
2007-01-30 Harrie says :

I've read about the :target selector (your example and the W3C's CSS3 selector page), it looks interesting, I'll do some experiments with the code I have, thank you very much.

The "free time" is currently a bit limited, so I'll leave reading the complete CSS3 selectors to my ToDo list, but I'm a bit puzzled by the "TR" in the URL, while the page says it's (still) a Working Draft. I thought Working Drafts did contain the string "WD" in the URL?

#17
2007-02-04 MC says :

I wonder why when once clicked (turns red) hover doesn't work anymore ?

#18
2007-02-04 BonRouge says :

MC,
I've just added this:#cssonclickswitch a:focus:hover {
color: #cff;
background:black;
}

That fixes it in Firefox. It doesn't fix it in IE (at least not IE6).
I've also just checked this page in Opera and found that the :focus thing doesn't work there. The :active bit works OK - so you can see the image while you hold the mouse button down - but the image disappears when you let go.

The more I think about it, the more I think javascript should be used for this kind of thing.

#19
2007-02-28 Hal says :

Javascript would be the easy solution, however this is a nice method to use for css when js isn't available. I tried adding this in for a myspace page and it works nicely in IE7, but not firefox or IE6. I think I can make it work in IE6, but firefox is probably a lost cause.

#20
2007-02-28 BonRouge says :

Hal,
It's funny you should say that, because I've found that this works better in Firefox than in IE...

#21
2007-02-28 Fresh says :

How would you add a sound to the onClick event?

#22
2007-02-28 BonRouge says :

Fresh,
I wouldn't.

#23
2007-02-28 Fresh says :

I am curious if CSS supports the use of sound files or if sound is limited to options like JS and Flash for something like this?

#24
2007-03-01 BonRouge says :

Fresh,
You can't add sound with CSS.

#25
2007-03-01 Hal says :

The above script worked in Firefox, but the changes I made only worked in IE7, one anchor tag within another anchor tag is what I think didn't let it work. And since myspace isn't up to css standards, I can only hover on the anchors. My myspace username is gamertagpics if you wanna check out the above css in action, IE7 ONLY though.

#26
2007-11-16 Josh says :

this is great.. very useful.. is there a way to turn the dotted border off that apears when the onclickswitch is used? thanks

#27
2007-11-16 BonRouge says :

Josh...a:focus {
outline:0;
}

#28
2008-01-19 Matthew says :

can I use this feature, so that another frame links to a page as well. Like, have this css affect, but with also a frame (eg target="mainFrame") linking to another page.
thanks! Great css!

#29
2008-04-04 Dave says :

Thats great, but allmost usefull in my case.
Is it possible that the active button (red beakcground/white text) can stay active untill you press a different button?
Because now, when you click somewhere on the page, the active status will set it selfs back to the default setting. I would like to have it stay active till you only click on a different button.
I'm searchin for some kind of behaviour, because i use a page with links to different video files. These video files are called in a lightbox effect/behaviour. But the a:focus will turn off again when the lightbox overlay is loaded. I would like to see, when people click on a video link, that the button turns active and stay active untill they choose a different video to watch.

Some story huh? haha
Well, i can't find something that suits my needs and your tuts are really coming close to what i need.

Hope to hear soon.

Best regards,
Dave.

#30
2008-04-21 Aaron says :

BonRouge,

Thank you. I can't explain why I want to use CSS for this rather than JS. And that alone might indicate how little I know. I do appreciate this so much.

I changed the menu to horizontal and I use text rather than images. It works out awesome.

I have a few questions:

In IE6, when I click an item, *sometimes* the <span> contents don't display until I move my mouse from hover. And, *sometimes* the contents display at the click. Do you know why this happens? Is that an IE problem I'll have to deal with?

#31
2008-04-22 BonRouge says :

Aaron,
That would be because IE6 is crap. smile

#32
2008-05-05 chris says :

what about safari for windows? why does this not work? (the image only becomes visible when the button is depressed, and disappears when released) should i care? i guess i just thought since it's supposed to be so standards compliant and all....

#33
2008-05-05 BonRouge says :

chris,
Why would anyone use Safari for Windows?
Seriously though, as I've said a few times above, this code is not reliable across many browsers, so you'd better using javascript for this effect.
I hope that helps.

#34
2008-05-11 Arcosinus says :

Don't use Javascript, use instead PHP, this is the only sollution!bye

#35
2008-05-11 Candace says :

I don't see why having an "original" or starting image is a problem with this script. If you simply put a picture in the place where the images will appear they overlap the original... until the visitor clicks again outside the links. Or if you can use absolute positioning... possibly use the starter image as a background.

#36
2008-10-02 elina says :

Hey, this is exactly what need and I copied it, it just doesn't work. Why? I have written the exact code as you have written it above?

#37
2008-10-02 BonRouge says :

elina,
Can you show me your page?

#38
2008-11-06 Gaetor says :

Beautiful CSS and a good & productive discussion ... hope we can continue to tweak it.

#39
2009-01-04 Chris says :

I need to have a image appear in a div column when I click a image in another div column on the same page. Similar to whats done here only a specific column is targeted, using only css. Thanks in apreciation.

#40
2009-01-05 BonRouge says :

Chris,
As that CSS is using absolute positioning for the image, you can have it appear anywhere you like by just changing the left and top values.
I hope that helps.

#41
2009-02-21 Andre says :

Who needs Javascript? CSS FTW!!
Amazingly simple, great tutorial.
It seems to be flawless on FF3 & IE6, are you aware of any browser issues?

#42
2009-03-04 Jason says :

I Love this, actually it has helped me understand spans a little bit better. I had no problem getting it to work for a webpage, but if i try to get it to work on myspace it only shows the text and pic it doesn't wait for the text to be clicked.
I'm not sure if you would know whats causing the problem but it cant hurt to ask.

Thank you in advance..

#43
2009-04-12 razzel says :

Hi,
Very interesting! I am trying to the same thing with a ul list: you click on the list header and the list shows itself beneath. A problem though: when I release the mouse button the list closes. Any tip how to make it stay?

#44
2009-04-13 Ajay says :

HI,
I need all ur CSS as inline.Is it possible??
Very urgent

#45
2009-04-13 BonRouge says :

razzel,
I guess I'd have to see the problem to comment on it.

Ajay,
No, that's not going to happen - especially not if it's 'very urgent'. Sorry.

#46
2009-04-13 razzel says :

#47
2009-04-13 razzel says :

#48
2009-07-06 Halag says :

BonRouge,perfect!
that is almost exactly what i wanted! Is it possible to have further links from images?

#49
2009-09-25 Bryan says :

This is exactly what I was looking for. Do you know why this isnt working right in Safari or Google Chrome? When I click the clicks the beers show up, but they dont stay put. As soon as you release the mouse button the beer disappears.

#50
2009-09-29 Cuong says :

Hello BonRouge!

I love your tutorial although I have a question. Based on your code...after you click a button and it is highlighted, is there a way to keep the focus on that button although you click somewhere else on the screen?

#51
2009-09-29 Cuong says :

Sorry forgot to mention that I did not want to hide and show DIVs but I am clicking on a hyperlink and it is opening to a targeted DIV.

#52
2009-11-20 Andy G. says :

First I want to thank you for this four-liner:
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}

That was exactly what I was trying to do for some time now. So you made my day! I'm still trying to improve it tho, perhaps you can help me.

The links that use this code for are in one div. Now is it possible that you can work on a second div and that in the maintime, the last clicked item keeps its color?

The purpose is the following. I wrote a kind of repository Explorer for Alfresco that can be displayed through html and css so it runs on any kind of computer. You have one navigation-div and one folder-content-div. This four-liner is used when you click on a folder in navigation-div so you see what you just clicked. But when you then open a file in the content-div, the color is being reset again in the navigation div, unfortunately.

Thanks anyway

#53
2010-03-08 Lee says :

Is there a way to keep the item selected when user click elsewhere on a page? Currently, it just un-highlight.

Thanks

#54
2010-07-15 Bob says :

Thanks for this, it was just what I was looking for.

Has anyone found a way to make it work in safari and chrome yet?

thanks again

#55
2010-08-19 omid reza says :

thanks
it is very good

#56
2010-08-28 PHOEBEConway27 says :

The <a href="http://bestfinance-blog.com">loan</a> suppose to be useful for people, which would like to ground their career. In fact, that's very comfortable to receive a credit loan.

#57
2010-09-07 feree says :

thanks alot dear BonRouge,your code worked.

#58
2010-10-13 Dragon says :

This is fantastic! I just need the menu to stay visible until clicked again. Is that possible with JUST CSS3 (using FF best 4.7 only which supports CSS3. Other browsers are not a concern)?

Thanks again for the code.

#59
2010-11-13 abid omar says :

i want to know that exactly how you do the click on the menu
please write the statement

#60
2010-11-22 murtada hassan says :

thank u very much

#61
2010-12-12 Anon says :

How did call onclick function?

#62
2011-03-07 Grey_Man says :

Thanks very much, great tutorial. Have a similar post on my blog As I Learn

#63
2011-03-23 Claudiu says :

Awesome dude! Works like a charm! Thanks a lot!

#64
2011-05-24 Boon says :

Great code there, as a lot of people have said it is pretty much exactly what I wanted!

However it is a little annoying that it doesn't work in chrome (the pictures and red background only display whilst the mouse button is depressed and disappear on release) any word on why this is or ideas to fix it?

#65
2011-06-16 srishida says :

I am trying to make a horizontal navigation bar for a webpage,which has drop-down sub-menu bar. The dropdown should be displayed only on clicking the elements in the navigation bar,and should remain displaying the dropdown until I click on an element from the dropdown. Also the element in the horizontal navigation bar should not land me to any page on clicking instead should display the dropdown. How can I achieve this using CSS, Please help!!!!

#66
2011-07-03 Mohammad says :

hi,your CSS was so useful for me thanks , but i have a question ,Dave ask it before but you did not answer ,
you click link it worked but after that when click other part of page link change to first type ! how can it stay like when click link ?

#67
2011-07-03 BonRouge says :

Mohammed,
I've tried to say a few times on this page that this is not a good way to do this. I put it here because I thought it was interesting and it showed how CSS could replace javascript in some situations. It seems that as this code does not work reliably, it's actually not very good.
Please have a look at this javascript solution, or elsewhere, for a better answer.

#68
2011-07-24 Sabir says :

Hi, I have tried to combine this with another content switcher I am using, but I just can't get the Title to change colour once it's been selected, the way your titles turn red?!?! For some reason it only turns red for a split second on clicking - any ideas? Please help

#69
2011-08-03 xinfurinfula says :

thanks!

#70
2011-12-08 djeddy says :

simple pero util

#71
2011-12-08 djeddy says :

very happy viva nicaragua!

#72
2012-05-25 alex says :

#73
2012-07-31 someone says :

this did not really help me i want to make some sort of movement when you click on a picture or something.

#74
2012-09-04 john says :

working beautifully. thank you!

#75
2012-11-28 Josh says :

I have a very similar request to the above mentioned and your tips have been really great for some other things I've been working on. However, I have a specific need for an onclick command that already has css3 action. I have a div that has content plus an iframe in it. It expands down from 50px to 150px height when hovered using -webkit-transition. What I need is to also make it so that when you click anywhere on the div, it will stay in the expanded state until I click it again to retract it. Specifically so that touchscreen users can see the entire div too. Have any ideas that could make that happen with what I'm already doing? I can provide the code if you need to see it.

#76
2012-11-28 Josh says :

I have a very similar request to the above mentioned and your tips have been really great for some other things I've been working on. However, I have a specific need for an onclick command that already has css3 action. I have a div that has content plus an iframe in it. It expands down from 50px to 150px height when hovered using -webkit-transition. What I need is to also make it so that when you click anywhere on the div, it will stay in the expanded state until I click it again to retract it. Specifically so that touchscreen users can see the entire div too. Have any ideas that could make that happen with what I'm already doing? I can provide the code if you need to see it.

#77
2012-11-28 josh says :

Oops. the comment page kicked back errors and loaded my comment twice. heh. php code check!

#78
2013-03-19 EJ says :

Hi guys,

chrome/safari handle :focus differently, there is a solution for it, just add in the <c><a tabindex="1"></c> to show element and <b>tabindex="2"</b> for the hide elements.

BonRogue thanks for sharing!

#79
2013-04-30 Chelsea says :

EJ, please elaborate. Where exactly do you put this code?

#80
2013-06-04 Bachi says :

Thanks for the tutorial AND especially also for the tipp in Comment #78 for Chrome and Safari smile I invested several hours with this problem befor i found this solution!

#81
2014-06-25 TTL says :

Chelsea, pls look at where tabindex="1" is placed below.

<ul>

<li><a href="#" tabindex="1">abcd</a>
<ul>
<li><a href="#">link 1</a></li>
<li><a href="#">link 2</a></li>
<li><a href="#">link 3</a></li>
</ul>
</li>

</ul>

#82
2015-02-09 Herman Nz says :

very useful tutorial. I'm new with this and I really need it this time. but, Is it compatible for all browsers?

#83
2016-02-10 Art says :

Nice

#84
2017-05-09 Kit says :

Will be there one thing called as cat mario unblocked?

It seems that, many internet websites never supply free of charge area to customers
to experience this online game. On the sensation, the game is simply not absolutely available on the web and scarcely, without a doubt rarely you will find some web sites delivering and no
cost and finished access to the match. By the way, if you discover
1 or any, please do we will. Now we have been trying to find some
cat mario unblocked application form. Anyhow, moving forward to a different one element
about Cat Mario, we have to be frank here once more and declare that play store
download subway surfers no age group limitations. Anybody
can perform this video game and the main objective than it should be to
have fun with this if possible but while there is nothing
known as cat mario unblocked, a great deal of your joy extraction will
hinge following in which you play this video game.
The state web site is the place you can try it out but there could possibly be some fee to generally
be produced.

Hello there there! This is regarded as the very best game from Weebly
and it's totally unblocked! Have fun with Cat Mario at school, perform or at your house daily.
Have fun!

Cat Mario 2 , 3 Activity Unblocked Syobon Measures is really a two dimensional Japanese foundation freeware indie video game published in Feb .
2007. This action game provides a different tackle one of many world_s most favored games.
Cause the bright cat over the Mushroom Kingdom. As opposed to Goombas and Koopas,
you_ll be facing an army of icky blobs.

Assist somewhat Cat Mario overcome all complications!
With this unblocked online game for education, it is important to take control of your cat making its way by
all discrepant regions stuffed with impediments. Get past all of them, collect more handy items and try your better to defeat all adversaries.
Best of luck!

#85
2017-05-16 Renato says :

Will there be a thing known as cat mario unblocked? Seemingly, lots of web sites tend
not to offer free of charge facility to consumers to play the video game.
In the sense, this online game will not be entirely on the
net and scarcely, indeed very rarely you will find some online websites giving and no cost and finished access to the
sport. By the way, if you realise a single or any, remember to we will.
We certainly have been in search of some cat mario unblocked application. At any rate, moving on to the other factor about Cat Mario, we must be frank in this article
again and state that cat mario tutorial no time restrictions.

Anyone can participate in this video game along
with the main purpose than it is always to like it wherever
possible but as there is almost nothing called as cat
mario unblocked, a lot of your enjoyment removal will hinge on in which you perform
this video game. The official site is the place you can give it a try but there can be some payment to generally be
created.

Hey there there! This is just about the most effective video game from Weebly
and it's totally unblocked! Engage in Cat Mario in school,
operate or at your house each day. Enjoy the fun!

Cat Mario 2 , 3 Sport Unblocked Syobon Measures is really a 2D Japanese platform freeware indie
game introduced in Feb 2007. This action activity supplies a diverse take on one of many world_s most
favored gaming systems. Steer the bright cat throughout the Mushroom Kingdom.
As an alternative to Goombas and Koopas, you_ll be up against an army of icky blobs.


Guide a little bit Cat Mario defeat all issues! In this unblocked video game for
institution, you need to manage your feline and also make
its way thru all discrepant regions loaded with impediments.
Get past all of them, get far more handy merchandise and attempt your very best to beat all adversaries.
Best of luck!

#86
2017-05-25 Ruby says :

Is there anything called as cat mario unblocked? It seems that, lots of websites usually do not
supply free center to customers to perform the game. During
the perception, this game is just not totally on the
net and rarely, certainly hardly ever you can get some online websites providing and free of charge and complete
accessibility game. Furthermore, if you realise
1 or any, please do we will. We certainly have been trying to find some
cat mario unblocked software. Regardless, moving
forward to another aspect about Cat Mario, we have to be frank right here again and say that games subway surfers free - joomla.mayraygabe.com - no age group confines.
Anybody can participate in this game and the main purpose of it is
to love it as much as possible but while there is practically nothing called as
cat mario unblocked, plenty of your delight removal will hinge after in places
you enjoy this game. The state site is where you can give it a try but there might be some
monthly payment to be designed.

Hi there! This is regarded as the most effective game
from Weebly and it's certainly unblocked! Enjoy
Cat Mario in school, operate or at your house everyday.

Enjoy the fun!

Cat Mario 2 , 3 Sport Unblocked Syobon Activity is usually a 2D Japanese base freeware indie video
gaming unveiled in Feb . 2007. This action online game comes with a various carry out one of
the world_s most in-demand games. Head the whitened kitty with the Mushroom Kingdom.
As opposed to Goombas and Koopas, you will be
up against an army of icky blobs.

Help just a little Cat Mario defeat all obstacles!
Within this unblocked match for education, you must take
control of your cat making its way by means of all discrepant areas stuffed with impediments.
Get past these, accumulate even more helpful items and try
your very best self to conquer all adversaries.
All the best !!

Comment form

Please type the word 'sexy' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url