Question

I have some different navigation boxes on my page, f.e. #home, #about etc and a :hover class for each (changes the bg)

#home {
    background-image: url(images/home.jpg);
}

#home:hover {
   background-image: url(images/home_hover.jpg); 
}

so now, I want to use the hover image as standard image if the page is selected. F.e. if I’m on the page ‘home’, I want the box to display the hover image as default instead of the normal. Is there a way to select classes like <div id="home:hover"> or something like that?

P.S. adding a new class for each box would take a lot of time, as I got pretty much.

Answer 1

I’d put a (common) class on whichever div is for the current page – so <div id="home" class="current"> – and have CSS like:

#home:hover, #home.current {
   background-image: url(images/home_hover.jpg); 
}