title: jQuery hover effect
body: <p>I am new to jQuery and trying to figure out how to use the <code>.hover();</code> effect in place of the <code>.mouseover()</code> and <code>.mouseout()</code> effects. Here is the scenerio:</p>
  
  <p>I am using a table and want to highlight the row with a CSS class that changes the background color to a light yellow. Here is the CSS:</p>
  
  <pre><code>.bgHvr {
    background-color: #FFFACD;
  }
  </code></pre>
  
  <p>The only way I know how to add the hover effect I desire is:</p>
  
  <pre><code>jQuery(document).ready(function($) {
    $('#table tbody tr').mouseover(function() {
      $(this).addClass('bgHvr');
    });
    $('#table tbody tr').mouseout(function() {
      $(this).removeClass('bgHvr');
    });
  });
  </code></pre>
  
  <p>UPDATE: </p>
  
  <p>After some more help I found out a simpler way of a hover effect:</p>
  
  <pre><code>$('#table tbody tr').hover(function() { 
    $(this).toggleClass('bgHvr');
  });
  </code></pre>
  
  <p>This is possible after the 1.4.2 update to jQuery which changed how the <code>.toggle()</code> effect worked.</p>