title: Keep hover background image active only unless second button is clicked
body: <p>I have two buttons (each with grey background image), and for each of those a color hover background image.  I'd like to keep the color background active only unless the button next to it is clicked.  Right now if you click anywhere on the screen the focus of that background hover image reverts back to the original grey button/image.</p>
  
  <p>Here's the fiddle with the CSS:
  <a href="http://jsfiddle.net/J6DP9/8/" rel="nofollow">http://jsfiddle.net/J6DP9/8/</a></p>
  
  <pre><code>&lt;div class="buttons-holder"&gt;
      &lt;button id="rdb1" type="button" name="toggler" value="US"&gt;United States&lt;/button&gt;
      &lt;button id="rdb2" type="button" name="toggler" value="International"&gt;International&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="cms-pages"&gt;
      &lt;div class="divclearboth"&gt;&lt;/div&gt;
      &lt;hr&gt;
  &lt;/div&gt;
  &lt;div id="blk-0" class="toHide"&gt;
      &lt;div class="center-form-img"&gt;
          &lt;img src="{{media url=" wysiwyg/form-inactive.jpg "}}" alt="" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="blk-US" class="toHide" style="display:none;"&gt;{{block type=core/template name=wholesale-us template=cmg/wholesale-us.phtml}}&lt;/div&gt;
  &lt;div id="blk-International" class="toHide" style="display:none;"&gt;{{block type=core/template name=wholesale-intl template=cmg/wholesale-intl.phtml}}&lt;/div&gt;
  </code></pre>
  
  <p>Here's the JS:</p>
  
  <pre><code>    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  $(function () {
      $("[name=toggler]").click(function () {
          $('.toHide').hide();
          $("#blk-" + $(this).val()).fadeIn();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Any help is much appreciated! Thanks in advance.</p>