1 reply [Last post]
Yakhunter
Offline
Regular
Last seen: 15 years 3 weeks ago
Joined: 2006-02-12
Posts: 11
Points: 0

Okay, what I have is and unordered list with some links. Just did some standard css rollovers for the links. The background images change just fine when I rollover them however when I click the links the :active css should kick in right? Well, it doesn't.

One thing I am doing that may be different is that the link does not take you to another page, rather it triggers some javascript. I thought the :active would still kick in though.

my links are just linked with the dummy
href"#"

Any help will be greatly appriciated.
and my css for them is:
ul {
width: 530px;
clear: both;
margin: 20px 0 0 0;
padding: 5px 0 0 0;
list-style-type: none;
background: url(images/tab_top_shadow.gif) bottom left no-repeat;
}

li {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
display: inline;
width: 74px;
height: 22px;
padding: 5px 0 0 0;
margin: 0 0 0 0;
cursor: default;
}

li a {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
float: left;
width: 74px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
padding: 3px 0 0 0;
margin: 0 0 -3px 0;
cursor: default;
outline: none;
}

li a:visited {
background: #FFFFFF url(images/tab_grey.gif) top left no-repeat;
width: 74px;
height: 22px;
text-align: center;
color: #959595;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 3px 0 0 0;
margin: 0 0 -3px 0;
}

li a:hover {
background: #FFFFFF url(images/tab.gif) top left no-repeat;
height: 22px;
width: 74px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 3px 0 0 0;
margin: 0 0 -3px 0;
}

li a:active {
background: #FFFFFF url(images/tab.gif) top left no-repeat;
height: 22px;
width: 74px;
color: black;
font-family: Arial;
font-size: 12px;
font-weight: bold;
text-decoration: none;
text-align: center;
padding: 3px 0 0 0;
margin: 0 0 -3px 0;
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 days 7 hours ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

:active won't work

Is there any difference between :hover{} and :active{}? If there is, and I missed it, make a simple test case, eg. a:hover {color: green;} a:active {color: red;}.

Too, recall that active only exists as a state while the enter key or mouse button is down.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.