working with active and hover links in css?

Question

i have this li list , but i want to know how to have the current page link have a background of white,(li:active)

css:

#layout-three-liquid2 #section-navigation ul
{
    margin: 0;
    padding: 0;
}

#layout-three-liquid2 #section-navigation ul li
{
    margin: 0 0 0em;
    padding: 0;
    list-style-type: none;
}
#layout-three-liquid2 #section-navigation ul li:hover{

    background-color:white;



}
#layout-three-liquid2 #section-navigation ul li a:active{

    background-color:white;



}

html:

<ul>
   <li><a active="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

but its not working, how can i solve this?

Answer 1

Your code li:active isn't valid/correct. You need to specify a class and the link in your CSS like this:

#section-navigation ul li a.current {
  background-color:white;
}

Answer 2

You can't do <a active="current">

because active isn't a valid attribute of the <a> element.

try using class=current instead.

then in your css you can target the element with

#layout-three-liquid2 #section-navigation ul li a.current {
    ...
}

Answer 3

You're abusing CSS pseudo-classes. :active and :hover are special values, those are used when the link is clicked (has the focus) and when the user moves the mouse pointer above it.

CSS classes should be used instead:
CSS:

#layout-three-liquid2 #section-navigation ul li a.current{

    background-color:white;
}

HTML:

<ul>
   <li><a class="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

Answer 4

Here is a link to an article which explains how to implement this.

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css

hope this helps.

Answer 5

Note that :active doesnt mean the page you are currently on, it just means that the link is being clicked. (It might works in framesets also)

You have to do some server side scripting to set the class to link_active or something like that.