title: Show DIV on hover of other DIV that is not parent with CSS or JS
body: <p>Now I can do that with CSS, but it works only when the hidden div is a child of a parent. You hover on parent div and set CSS on hover to display the child from <code>none</code> to <code>block</code>, something like that.</p>
  
  <p>But how do you do that if the hidden block is outside the div that you hover and the hidden one appears?</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;div class="field-1"&gt;&lt;/div&gt;
  &lt;div class="field-2"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt consequat tristique. Curabitur vestibulum semper nulla id ornare.&lt;/div&gt;
  </code></pre>
  
  <p>JSFiddle <a href="http://jsfiddle.net/23u3rmx5/" rel="nofollow">http://jsfiddle.net/23u3rmx5/</a> when you hover over red block the .field-2 must appear below it. You cannot move the div structure, e.g. move .field-2 inside .field-1, I can do that, but that's not the solution.</p>
  
  <p>Thanks for helping and cheers! Have a good weekend!</p>