title: What is the opposite of :hover (on mouse leave)?
body: <p>Is there any way to do the opposite of <code>:hover</code> <strong>using only</strong> CSS? As in: if <code>:hover</code> is <code>on Mouse Enter</code>, is there a CSS equivalent to <code>on Mouse Leave</code>?</p>
  
  <p>Example:</p>
  
  <p>I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from <code>#999</code> to <code>black</code>. How can I create the opposite effect when the mouse leaves the item area, with an animation from <code>black</code> to <code>#999</code>?</p>
  
  <p><a href="http://jsfiddle.net/Cthulhu/SZqkb/">jsFiddle</a></p>
  
  <p>(Have in mind that I do not wish to answer only this example, but the entire "opposite of <code>:hover</code>" issue.)</p>