title: stop hover's mouseout when clicked
body: <p>I have 2 events on one table cell taking place.
  1, a simple tr row highlighter on .hover(on, off) and
  2, onclick, it slides open a div below it.</p>
  
  <p>Both items work as desired.  What I am trying to do is STOP the 2nd part of the .hover function (on mouseout) from firing when the tr is clicked so that it stays highlighted when the div is opened.   I tried using the class on the function, but 99% of the time, it tires to hilight it while my mouse is still on it, thus when my mouse moves off it, it renders it back to normal lo-lite state.</p>
  
  <p>So, how do i, with the .click() call, stop a seperate .hover call's 2nd function part from running?</p>
  
  <p>these functions seem a bit stupid as is, but in my real code, there's a LOT more going on.  so, these are the stripped out parts of the actions.</p>
  
  <p>.hover(
          function(){<br>
              $(this).removeClass('xhead');
              $(this).addClass('headerhover');
          }
          , 
          function(){ 
              $(this).removeClass('headerhover') 
              $(this).addClass('xhead');
           }
      );</p>
  
  <p>and this:</p>
  
  <pre><code>function togglediv(id){
      $("#"+id).toggle("fast");
  }
  </code></pre>
  
  <p>gets called from:</p>
  
  <pre><code>function loadmenu(id){
      var divid = 'div_'+id+'_detail';
      togglediv(divid);
  }
  </code></pre>
  
  <p>which is a 2nd call of:</p>
  
  <pre><code>$('.viewer').click(function(e) {        
      var id = e.target.id;                   
      loadmenu(id);           
      }
  });
  </code></pre>
  
  <p>fiddle is blocked at work... sorry i can't make it easier.</p>
  
  <p>appreciate the ideas.</p>
  
  <p>The long and short of it is that on .vm click, stick headerhover, kill mouseout event from returning it to xhead class.  Otherwise, if no click, perform the class swap to do the row highlight.</p>