title: Where to define hover class/behavior to override jQuery's theme CSS?
body: <p>I have such a webpage with some jQuery using <code>http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</code></p>
  
  <p>I would like to define the "highlight row" behavior but somehow I cannot override it as long as I am using jQuery's theme mentioned above. </p>
  
  <p>My code : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script&gt;
      $(function() {
          $( "#tabs" ).tabs();
          $( document ).tooltip();
  
          $("tbody &gt; tr:even").addClass("even");
          $("tbody &gt; tr:odd").addClass("odd");
          $("#company_row ~ tr").bind( "mouseover", function(e){
             $(this).toggleClass("highlight");
          });
          $("#company_row ~ tr").bind( "mouseout", function(e){
             $(this).toggleClass("highlight");
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;style&gt;
  tr.even { background-color: #efefef; }
  tr.odd { background-color: #fff; }
  .highlight { background-color: #fffdcd !important; }
  &lt;/style&gt;
  
  &lt;div id="tabs"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tabs-1" title="Info about companies"&gt;Companies&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#tabs-2" title="Info about people"&gt;People&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div id="tabs-1"&gt;
      &lt;table border='2' id="companies"&gt;&lt;/table&gt;
    &lt;/div&gt;
    &lt;div id="tabs-2"&gt;
      &lt;table border='2' id="people"&gt;&lt;/table&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have also tried this </p>
  
  <pre><code>$("#companies").hover(
    function () {
      $(this).css("background","yellow");
    }, 
    function () {
      $(this).css("background","");
    }
  );
  </code></pre>