Hiya,

 

I'm working on a website for a friend of mine at the moment (www.honeycombeproductions.com.au), and I've encountered an issue with the styling of my hyperlinks that I'm not too sure how to fix. My friend wanted the colour changing hover effect on the navigation section of the site, which has not been a problem, but my issue is that once you hae visited a particular page, the "a:hover" style no longer works because the "a:visited" style is activated. Is there a way to make it so that even once a page has been visited, the hover style still works in the main navigation menu? Here's the CSS I'm currently using.

 

 

#nav-bar a:link {

color: #FFF;

text-decoration: none;

}

 

#nav-bar a:hover {

color: #73bdaf;

text-decoration: none;

}

 

#nav-bar a:visited {

color: #FFF;

text-decoration: none;

}

 

 

Cheers,

 

Chris

Hiya,

 

I'm working on a website for a friend of mine at the moment (www.honeycombeproductions.com.au), and I've encountered an issue with the styling of my hyperlinks that I'm not too sure how to fix. My friend wanted the colour changing hover effect on the navigation section of the site, which has not been a problem, but my issue is that once you hae visited a particular page, the "a:hover" style no longer works because the "a:visited" style is activated. Is there a way to make it so that even once a page has been visited, the hover style still works in the main navigation menu? Here's the CSS I'm currently using.

 

 

#nav-bar a:link {

color: #FFF;

text-decoration: none;

}

 

#nav-bar a:hover {

color: #73bdaf;

text-decoration: none;

}

 

#nav-bar a:visited {

color: #FFF;

text-decoration: none;

}

 

 

Cheers,

 

Chris

 

Hi,

 

you only have to change the sequence of psudo classes

 

#nav-bar a:link {

color: #FFF;

text-decoration: none;

}

 

#nav-bar a:visited {

color: #FFF;

text-decoration: none;

}

 

#nav-bar a:hover {

color: #73bdaf;

text-decoration: none;

}

This seems to have sorted it. Thanks so much!

An easy way to remember the correct sequence (i think elanman told me this), is LoVe HAte

 

:Link

:Visited

:Hover

:Active

Don't forget :focus

Don't forget :focus

yeah, we shouldn't mention that until people grasp it's importance . The amount of sites i use with my phone that have removed focus, gah!

 

:focus isn't particularly aimed at links though, it's applicable to all sorts, such as inputs etc.

 

You could argue the same for hover though, however i'm pretty sure visited and active are link only

http://www.webcredible.co.uk/user-friendly-resources/web-accessibility/motor-impaired.shtml has some useful info on usinging :focus for keyboard accessibility