title: Trigger a :hover event by hovering on an other
body: <p>I have a jQuery issue; I would like to trigger a <code>:hover</code> event on an element by hovering on an other, the console shows me an error: </p>
  
  <blockquote>
    <p>Uncaught RangeError: Maximum call stack size exceeded</p>
  </blockquote>
  
  <p>Here is my Javascript function :</p>
  
  <pre><code>$(".love").hover(function() { 
      $(".fa-heart").trigger('mouseover'); 
  });
  </code></pre>
  
  <p>Here is my HTML :</p>
  
  <pre><code>                                   &lt;div class="middle-bar grey-dark"&gt;&lt;/div&gt;
                                          &lt;ol class="container text-center" id="love-inline"&gt;
                                              &lt;li&gt;
                                                  &lt;h2 class="love inline" id="LOVE-left"&gt;Nos coups de&lt;/h2&gt;
                                              &lt;/li&gt; 
                                              &amp;nbsp; 
                                              &lt;li&gt;
                                                  &lt;h2 class="love inline" id="heart"&gt;&lt;i class="fa fa-heart hvr-pulse-grow"&gt;&lt;/i&gt;&lt;/h2&gt;
                                              &lt;/li&gt;
                                              &amp;nbsp;
                                              &lt;li&gt;
                                                  &lt;h2 class="love inline" id="LOVE-right"&gt;du moment&lt;/h2&gt;
                                              &lt;/li&gt;
                                          &lt;/ol&gt;
                                      &lt;div class="little-middle-bar grey-dark"&gt;&lt;/div&gt;
                                  &lt;div class="end-bar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Any idea ? </p>