title: How to maintain hover state on link after clicked and off when another link is clicked on dynamically-generated page
body: <p>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.</p>
  
  <pre><code>#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;}
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>function showonlyone(thechosenone) {
   $('div[class|="page"]').each(function(index) {
        if ($(this).attr("id") == thechosenone) {
             $(this).show();
        }
        else {
             $(this).hide();
        }
   });
  </code></pre>
  
  <p>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.</p>