title: Animate one Div when the mouse hovers over another
body: <p>I'm looking to animate one div when the mouse hovers over another div tag elsewhere on the page. As an example...</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#blue-box {
  position:absolute;
  margin-left:50px;
  margin-top:50px;
  height:100px;
  width:100px;
  background-color:blue;
  
  }
  
  #red-box {
  position:absolute;
  margin-left:180px;
  margin-top:50px;
  height:100px;
  width:100px;
  background-color:red;
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="blue-box"&gt;&lt;/div&gt;
  &lt;div id="red-box"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function(){
      $('#red-box').animate({'margin-top': '200px'}, 1500);
  });
  </code></pre>
  
  <p>I've also made a <a href="http://jsfiddle.net/4rnLp/1/" rel="nofollow">jsFiddle</a> to help.</p>
  
  <p>How would I get the animation to trigger on the red box, whenever the mouse hovers over the blue box? And reverse the animation when the mouse is moved away from the blue box? Returning the red box to it's starting position.</p>
  
  <p>Could anyone help me?</p>