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!

Register Log in
  • Congratulations Mike Lewis 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

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;}
 
Sort by date Sort by votes
...on mouse out the menu cell returns to it's original colour...
Click to expand...

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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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!
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.)
Click to expand...
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]
 
Upvote 0 Downvote
Hi

Vragabond said:
As far as my tests go, Opera has always supported the :focus pseudo-class.
Click to expand...
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.
 
Upvote 0 Downvote
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.

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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]
 
Upvote 0 Downvote
Vragabond, yes I think you are correct. I'll look for a better solution. :s
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
790
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
412
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
328
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
361
PeDa
PeDa
tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
138
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top