Question

Site navigation html:

<div class="main_nav">
    <div><a href="home/">Home</a></div>
    <div><a href="company/">Company</a></div>
    <div class="active"><a href="franchise/">Franchise</a></div>
</div>

When a link is hovered it gets a specific background color.

My question is, how can I keep this hover state while the clicked page is loaded and the old is still displayed? I mean you hover a link item, the background changes, you click the background changes to default and the new site starts loading.

This is not necessay when the new page is loaded fast so you not really see the difference. However I am curious to know if this is possible with just css techniques.

Any ideas?

My css:

.header_wrapper .main_nav div a:link{
  display:block;
  text-decoration:none;
  color:#f5f5f5;
}

.header_wrapper .main_nav div.active a:link{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

.header_wrapper .main_nav div a:hover{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

.header_wrapper .main_nav div a:focus{
  color:#f5f5f5;
  background: url(images/layout/main_nav_bg_hover.png) repeat-x;
}

Answer 1

Hey now used to focus properties as like this

a:focus{
// css properties 
}

Live demo