title: CSS hover to stay on mouse over
body: <p>Okay, so if you could go to;</p>
  
  <p><a href="http://jsfiddle.net/aled2305/UzM7U/4/" rel="nofollow">http://jsfiddle.net/aled2305/UzM7U/4/</a></p>
  
  <p>you will see a blue circle, when you take your mouse over a red square will appear to the right. Now that all works how I want, but I would like the red box to stay when the user then takes their mouse over it.</p>
  
  <p>Now if you take your mouse over where the red square shows, it will show because of </p>
  
  <pre><code>.down:hover
  {
      opacity:100;
  }
  </code></pre>
  
  <p>So is there a way to get the red square to stay when a mouse is over it, but only when it is activated by hovering over the blue circle.</p>
  
  <p>Thanks in advance</p>
  
  <p>Aled</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Sorry forgot to say I would like the red square to hide once the mouse has been taken off.</p>
  
  <p>Thanks</p>