PDA

View Full Version : Help with Hover/Active/Visited Hyperlinks in CSS



Phatmat
Dec 14th, 2008, 09:24 AM
I am new to CSS coding, but am learning quickly, as it's not too difficult. I have four buttons on my website - the main navigation buttons. I want, when hovered over, for them to display an orange arrow (shown below) and I've accomplished this. When they are clicked they shouldn't stay with the orange arrow, and I've got this working as well.

Though, the problem that I am facing is that, say I'm on my 'Home' page for example, I would like the button link to show up with the orange arrow. Take a look at these images below, hopefully they will help you understand what I need:

When I am on my home page this is what the button looks like:
http://img123.imageshack.us/img123/3625/img1kq6.jpg

This is what I want it to be when I am on my home page:
http://img57.imageshack.us/img57/8724/img2iz8.jpg


Here is my CSS code for the button:

li a {
display : block;
width : 198px;
height : 30px;
line-height : 30px;
background : url(images/nav.jpg) no-repeat left top;
text-indent : 5px;
color : #ff4c1c;
text-decoration : none;
font-weight : bold;
}
li a:hover {
background-position : right top;
color : #ff9900;
font-weight : 800;
}
li a:active {
background-position : right top;
color : #ff9900;
font-weight : 800;
}
li a:visited {
font-weight : 800;
}


The "li a:active" should be the one that needs adjusting, am I correct? The issue is that the "Hover" link will display the orange arrow, so since the "Active" link is the exact same it should display the orange arrow when a user is on the active page not only when the mouse is hovered over the link?

Any help will be great, thanks!
Matt.


note: To speed up loading time, the "Arrow" and "No Arrow" use the same image. To display the arrow the image is right orientated and to show no arrow the image is left orientated:
e.g. images/nav.jpg is http://img399.imageshack.us/img399/5404/navqu3.jpg

FWDrew
Dec 14th, 2008, 11:38 AM
Hey there,

the :active pseudo element actually only applies to an element that is "active" as in being clicked. Not the active page as you were saying.

To accomplish this, give whatever the link you need to be highlighted a style with a unique id or class.



li a {
//styles
}
li a#active {
//styles
}
/****continue styles****/



<ul>
<li><a id="active" href="" title="">Home</a></li>
<li><a href="" title="">About</a></li>
<!--etc-->
</ul>

http://w3schools.com/css/css_reference.asp#pseudoclasses

Hope that helps,

Drew

Phatmat
Dec 14th, 2008, 12:50 PM
It worked a charm, thanks for your help Drew!