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!

  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS "active" pseudo class 2

Status
Not open for further replies.

Hondy

Technical User
Mar 3, 2003
864
GB
Hi

The code below pretty much works but the "active" pseudo-class doesn't seem to work, on mouse out the menu cell returns to it's original colour. Whats up with it?

Thanks!
Code....

XHTML
<div id="leftcolumn">
<!-- Left navigation column-->
<a class="nav" href="#" title="page 1">Page 1</a>
<a class="nav" href="#" title="page 2">Page 2</a>
<a class="nav" href="#" title="page 3">Page 3</a>
<a class="nav" href="#" title="page 4">Page 4</a>
<a class="nav" href="#" title="page 5">Page 5</a>
</div>

CSS
#leftcolumn {
width:200px;
height:900px;

}
a.nav, a.nav:link, a.nav:visited {
display:block;
width:200px;
height:50px;
background:#dca;
border:1px solid #000;
margin-top:0px;
text-align:center;
text-decoration:none;
font-family:verdana, arial, sans-serif;
font-size:12px;
color:#000;
line-height:25px;
overflow:hidden;}
a.nav:hover {color:#fff; background:#fff;}
a.nav:active {color:#fff; background:#fff;}
 
...on mouse out the menu cell returns to it's original colour...

That's because it is no longer active.

(It is only active while the button is being pushed.)

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard
 
The :active pseudo-class applies while an element is being activated by the user. For example, between the times the user presses the mouse button and releases it. See
If you want the best response to a question, please check out FAQ222-2244 first.
'If we're supposed to work in Hex, why have we only got A fingers?'
Drive a Steam Roller
 
OK, that makes sense.

I wanted to make it so that the selected menu item stays a certain colour when I click it, can this be acheived with my code above?

I see many sites that work this way, I'm sure i've done it before but I can't remember how I achieved it :S

Thanks in advance
 
Then a:visited is the pseudo-class that you want - the link will stay the "visited" color until the user's browser's cache lets it go (which seems to be a matter of weeks or so - I don't know).

HTH!
 
Your best bet is to use a class for that. If the page is reloaded after the button is pushed, then you should assign a special class to the menu item that is selected on each specific page. If it is a javascript menu, then you can programmatically add the class (and remove it), once you do the other tasks.

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

Not sure what is your goal, but take a look at the [tt]:focus[/tt] pseudo-class too.

Note that [tt]:focus[/tt] is supported by Gecko ( FireFox, SeaMonkey, Galeon ), WebKit ( Epiphany, Midori, Arora, Safari, Chrome ) and KHTML ( Konqueror ), not supported by Presto ( Opera ) and Trident ( Explorer ). ( The situation may be changed in newer Explorers. )

Feherke.
 
feherke said:
Note that :focus is supported by Gecko (FireFox, SeaMonkey, Galeon), WebKit (Epiphany, Midori, Arora, Safari, Chrome) and KHTML (Konqueror), not supported by Presto (Opera) and Trident (Explorer). (The situation may be changed in newer Explorers.)
As far as my tests go, Opera has always supported the :focus pseudo-class. I am not sure about IE8, but IE7 and lower do not support it.



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

Vragabond said:
As far as my tests go, Opera has always supported the :focus pseudo-class.
I have Opera 10.10 and with the following code the focused elements are not getting red background :

Code:
[red]<!DOCTYPE[/red] [maroon]HTML[/maroon] [maroon]PUBLIC[/maroon] [green][i]"-//W3C//DTD HTML 4.01//EN"[/i][/green] [green][i]"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd"[/URL][/i][/green][red]>[/red]
[b]<html>[/b]
[b]<head>[/b]
[b]<meta[/b] [maroon]http-equiv[/maroon][teal]=[/teal][green][i]"content-type"[/i][/green] [maroon]content[/maroon][teal]=[/teal][green][i]"text/html;charset=utf-8"[/i][/green][b]>[/b]
[b]<title></title>[/b]
[b]<style[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text/css"[/i][/green][b]>[/b]
a:focus {
  background-color: red;
}
input:focus {
  background-color: red;
}
[b]</style>[/b]
[b]</head>[/b]
[b]<body>[/b]
[b]<form[/b] [maroon]action[/maroon][teal]=[/teal][green][i]""[/i][/green][b]>[/b]
[b]<p>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"[URL unfurl="true"]http://tek-tips.com/"[/URL][/i][/green][b]>[/b]Tek-Tips[b]</a>[/b]
[b]<a[/b] [maroon]href[/maroon][teal]=[/teal][green][i]"#top"[/i][/green][b]>[/b]Top[b]</a>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"text"[/i][/green][b]>[/b]
[b]<input[/b] [maroon]type[/maroon][teal]=[/teal][green][i]"submit"[/i][/green][b]>[/b]
[b]</p>[/b]
[b]</form>[/b]
[b]</body>[/b]
[b]</html>[/b]

Could you post your working test ?

Feherke.
 
feherke - thank you sir! It seems I had forgotten about the focus pseudo-class. it was "focus" i needed all along not "active". I wasted hours on the wrong thing!

Thanks to everyone else too, it has given me some further ideas.

 
I've had a read but can't find the info, can anyone tell me if the focus pseudo class works on IE 6+7?

Thanks
 
Hi

An Opera-related rectification : [tt]:focus[/tt] works on form elements if Tools | Preferences... | Content | Style Options... | Enable styling of forms is checked. But I still not found any way to make it work for links.


Feherke.
 
yeh that link you provided (thanks) seems to corroborate Vragabonds findings. I have tested it in IE8 and it works but I imagine the majority of visitors won't be on IE 8... dammit!

Thanks again
 
feherke, your code works on my Opera 10.10 (OS WinXP SP3) for both input field and the anchor. See it in action here:
OperaFocus.jpg


Hondy, although :focus seems to be a great solution for you, you should note that the class will only be applied while the element has focus. That is, if you click anywhere else in the page (not another link), the focus will be lost and the class will be removed. I don't know about others, but I usually random click around the page as I am reading text and that would cause the element in question to lose focus.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Vragabond, yes I think you are correct. I'll look for a better solution. :s
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top