title: jquery switch element classes
body: <p>Please take a look here: <a href="http://jsfiddle.net/ZUd27/7/" rel="nofollow">http://jsfiddle.net/ZUd27/7/</a></p>
  
  <p>What I need:</p>
  
  <ul>
  <li>There are several elements. One of them is active and visible.</li>
  <li>If I hover over any inactive element, it becomes visible and active. The previously active element becomes inactive.</li>
  <li>On mouseout, nothing happens - the last hovered element stays active.</li>
  </ul>
  
  <p>My problems:</p>
  
  <ul>
  <li>The first active element always stays active (in DOM?). It becomes invisible, but on next mouseover nothing happens.</li>
  <li>Other elements don't behave as they should. If one of them is active, on next mousein it becomes invisible.</li>
  </ul>
  
  <p>thx</p>