title: Trigger hover effect over another element when hovering an element
body: <p>I am having issues with this: I want to force a hover function over the image when infact hovering over the h3 element</p>
  
  <p>html:</p>
  
  <pre><code>&lt;p&gt;&lt;a&gt;&lt;img class="size-full wp-image-1236 alignleft" alt="phone-icon-red" src="..." width="50" height="50" /&gt;&lt;/a&gt;&lt;/p&gt;
  &lt;h3&gt;Contact Us&lt;/h3&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>img:hover{
      margin-left: 10px;
  }
  </code></pre>
  
  <p>js:</p>
  
  <pre><code>$('h3').hover(function(e){
                  e.preventDefault();
                  $(this).prev('p').find('img').trigger('mouseover');
              });
  </code></pre>
  
  <p>See my <strong><a href="http://jsfiddle.net/7L4WZ/166/" rel="noreferrer">fiddle</a></strong></p>