Question

I don’t know if this can be resolved with css or javascript. I’ve got a series of navigation squares built with css. The background color changes on hover states.

#nav1, #nav2, #nav3
{position: absolute; width:20px; height:20px;  margin-right:7px;}
#nav2 {left: 27px;}#nav3 {left: 54px;}

a.nav:link {color: #fff;background-color: #bfbfc9;}
a.nav:visited, a.nav:hover, a.nav:active {background-color: #979695;}

These navigations squares ore contained in a div within a dynamically-generated page. I’ve used JQery function showonlyone(thechosenone) to show and hide the part of the page that shows and is hidden.

function showonlyone(thechosenone) {
 $('div[class|="page"]').each(function(index) {
      if ($(this).attr("id") == thechosenone) {
           $(this).show();
      }
      else {
           $(this).hide();
      }
 });

After the cursor leaves the navigation square, whether it’s hovered over or clicked on, the background color changes back to it’s original state. I would like the color to stay the same color as the hovered state when the current page is showing. I’ve made an exhaustive search but nothing seems to work. Thanks for your help.

Answer 1

HTML:

<ul>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
    <li><a class="nav" href="#"></a></li>
</ul>

CSS:

a.nav:visited, a.nav:hover, a.nav:active, a.nav.active {background-color: #979695;}

Javascript:

$('.nav').click(function(){
    // Call your "showonlyone" function
    $(this).addClass('active')
        .parent().siblings()
        .find('a').removeClass('active');
});

You might have to adapt this to your HTML, but you get the idea.

If you need more help, then post your HTML.