CSS OnClick Active state modifications to existing code

pdeman · Jul 20, 2010

Hello

I have the following code which creates menu or rollover buttons with rounded corners using only CSS and no images and works in IE.

I need to modify the CSS to include the OnClick or Active state which I think it is called in CSS so that the button Background or Border or Text changes to a different colour when clicked.

Can anyone help me by modifying the code?

Thank you and best regards

****************************CODE START***************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="

http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">

</style>
</head>

<body>
<ul class="qcorners" >
<li><a href="#"> some text </a></li>
<li><a href="#"> another item</a></li>
<li><a href="#"> all lists and link tags... </a></li>
<li><a href="#"> with a little strong </a></li>
<li><a href="#"> stretches in 2 directions </a></li>

</ul>
</body>
</html>
****************************CODE END****************************

Vragabond · Jul 20, 2010

Code:

.qcorners a:active,.qcorners a:active strong{background:blue;}

Add this to the end of your css section.

Please note that this will change will take effect when you are actively pressing the button (clicking on it). Once you're no longer clicking on it, it will revert back to hover (if the mouse is still on) or link (if the mouse is off).

If you need to have additional state for links that denote the current page or something, you will have to add it as a class to the relevant link.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

pdeman · Jul 20, 2010

Hello Vragabond

Thank you for your reply.
I tired your modification however it does not seem to work.
If I delete the Strong from the CSS then it works but only if you click in a certain place which is no good. Anyway deleting the Strong from the CSS changes the way the script works which also is no good.
I just thought it might mean something to someone who understands what the code is doing and might be able to help me make the OnClick or Action style work with the existing code.

Thank you and best regards

Vragabond · Jul 20, 2010

Please check your example with my addition here: active example.

This works as I said it would and uses the code I gave you. When clicking anywhere in the button (tested in IE7 and FF3.6), the background of the button changes to blue. IE7 interprets this wrong and keeps the blue background until you click somewhere else (this would actually be :focus, rather than :active), while FF interprets it correctly and displays blue only while the button is being pressed (clicked on with a mouse).

To explain the code, it means:
- comma separates two independent selectors that both use the same declaration
- first selector says: when a link element that is inside an element with a class named "qcorners" is active (being clicked), change the background colour to blue.
- second selector says: when a link element, which itself is inside an element with a class named "qcorners", has a strong element as a child and is active (being clicked), change the background colour of the strong element to blue.

Hope it makes sense. Again, if the :active or the effect of mouse clicking on the link is not what you're after, you will have to go down another route.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

pdeman · Jul 20, 2010

Hello Vragabond

Thank you for your reply.
I clicked on your link 'active example' and it still won’t work for me.
I’m running IE8.
Interestingly when I change active with focus like you mention it does work so this must be the solution I guess. Thank you for your help and time I have learnt something new. Not quite sure why focus works for me and active doesn’t but the important thing is it does.

Thank you and best regards

vacunita · Jul 20, 2010

Yeah, IE8 doesn't seem to like it. IE8 in compatibility mode works.

IE: The bane of web developers. It sure would be nice if IE managed to be consistent with other browsers and itself one of these days.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Behind the Web, Tips and Tricks for Web Development.

http://behindtheweb.blogspot.com/

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

CSS OnClick Active state modifications to existing code

pdeman

Programmer

Vragabond

Programmer

pdeman

Programmer

Vragabond

Programmer

pdeman

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor