title: jQuery: trigger a hover event from another element
body: <p>When you hover over one <code>&lt;div&gt;</code>, I want an <code>&lt;a&gt;</code> on a separate part of the page to be "hovered" on also.</p>
  
  <pre><code>&lt;div class="initiator"&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;a class="receiver href="#"&gt;Touch the div and I get hovered!&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've tried this jQuery, but it doesn't trigger the <code>&lt;a&gt;</code>'s hover CSS. </p>
  
  <pre><code>$(".initiator").hover(function(){
     $(".receiver").hover();
     console.log("div was hovered");
  });
  </code></pre>