CODEWITHSUNDEEP
htmlcsshyperlinkhtml-lists
getaway
getaway

Reputation: 8990

working with active and hover links in css?

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?

Upvotes: 0

Views: 8029

Answers (4)

Lekensteyn
Lekensteyn

Reputation: 66415

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>

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382706

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;
}

Upvotes: 2

Rabarber
Rabarber

Reputation: 1

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.

Upvotes: 0

bimbom22
bimbom22

Reputation: 4510

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 {
    ...
}

Upvotes: 1

Related Questions