Css current page highlighting

Forum Moderators: not2easy

Message Too Old, No Replies

Css current page highlighting

style declaration, hover rule

AcidGod

10:32 pm on Feb 4, 2008 (gmt 0)

could any one explain what did the guy from this forum mean, by saying Now add a style declaration that will set the link corresponding to the current page to the same settings as the :hover rule body#home a#home_link,
body#services a#services_link,
body#about a#about_link,
body#contact a#contact_link {
color: #000;
background: #fff;
}
? I've done all the past steps but i don't understand what shoud i do with this? where shell i put it I'm new in css and I don't realy get what is ":hover rule

swa66

11:43 am on Feb 5, 2008 (gmt 0)

services.html:

<html>
<head>[...]</head>
<body id="services">
[...]
<a href="/services.html" id="services_link">services</a>
<a href="/about.html" id="about_link">about us</a>
[...]
</body>
</html>

The id on body is selected through body#services.
body#services a#services_link
select the first <a> in the above example
but not the second.

In the other files the id on the body is changed to about, contact etc. ...

It's a neat solution

If you want the style to change on mouse over, you can add to the CSS another rule:

body#services a#services_link:hover,
body#about a#about_link:hover,
body#contact a#contact_link:hover {
color: red;
background: yellow;
}

Hope somewhere in there is what you're seeking, if not try again ...