title: Animating an element when hovering on two other element using css
body: <p>i am trying to animate a div when hovering on another div. Ihave following code</p>
  
  <p>html</p>
  
  <pre><code>&lt;div&gt;
  &lt;/div&gt;
  &lt;div class="content"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>div {
      height: 100px;
      width: 100px;
      background: red; 
          transition: all 0.4s ease-in-out;
  }
  .content {
      height: 20px;
      width: 20px;
      background: green;
      display: none;
  
  }
  div:hover + .content{
      display: block;
      margin-top: -100px;
      margin-left: 50px;
  }
  </code></pre>
  
  <p>What i am trying to do is, i need to animate .content to margin-top: -100px and margin-left: 50px; from its default position,  when the  user is hover on one of these elements. But atm with this code it only works when the user hover on the .content and it animate the other way. (from margin-top: -100px and margin-left: 50px; to default position). Please excuse my english </p>
  
  <p>jsfiddle-> <a href="http://jsfiddle.net/fTAUk/1/" rel="noreferrer">http://jsfiddle.net/fTAUk/1/</a>  </p>