title: How to force :hover on DOM element?
body: <p>There are a lot of questions exactly like this and all of them answer the same - <strong>just add class</strong> and toggle it. <strong>Not in my case</strong>.</p>
  
  <p>Scenario:</p>
  
  <p>When my page scrolls, I duplicate the table's first column and attach it with <code>position:fixed</code> to the left of the browser which makes me see the headers when table is wide.</p>
  
  <p>Original table has css with <code>:hover</code> like this:</p>
  
  <pre><code>table tr:hover td { background: red }
  </code></pre>
  
  <p>This is great as I can see the whole row highlighted when I hover it, but not so great that
  if I hover the cloned table it highlights only this one column. I would like to force :hover state on original table by <strong>not adding any class.</strong></p>
  
  <p>What I have tried so far without any effect:</p>
  
  <pre><code> - .trigger('mouseover');
   - .trigger('mouseenter');
   - .trigger('hover');
   - .hover()
   - .mouseenter();
   - .mouseover();
  </code></pre>