title: Bootstrap 3 - Highlight table row when hovering over a certain row in another table
body: <p>I have two tables that will be placed side-by-side:</p>
  
  <pre><code>&lt;table id="Table1" class="table table-hover"&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
             &lt;td&gt;Col 1&lt;/td&gt;
             &lt;td&gt;Col 2 &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  
  &lt;table id="Table2" class="table table-hover"&gt;
      &lt;tbody&gt;
         &lt;tr&gt;
             &lt;td&gt;Col 1&lt;/td&gt;
             &lt;td&gt;Col 2 &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I want to make the row highlighting effect on mouse hover to work across the rows so that it appears as if they are the same table. I.e. When the user's curser is over Col 2 in table 1, then Col-2 in table one will also appear to be highlighted.</p>
  
  <p>There are no classes added to the markup when highlighted so I don't think that I can use an on-hover event to then apply the class across the rest of the rows using jQuery.</p>
  
  <p>Please not that I am using Bootstrap 3.0.3.</p>