What is the opposite of :hover (on mouse leave)?

css, hover

Solution

If I understand correctly you could do the same thing by moving your transitions to the link rather than the hover state:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

The definition of hover is:

The :hover selector is used to select elements when you mouse over them.

By that definition the opposite of hover is any point at which the mouse is not over it. Someone far smarter than me has done this article, setting different transitions on both states - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Problem

Is there any way to do the opposite of `:hover` using only CSS? As in: if `:hover` is `on Mouse Enter`, is there a CSS equivalent to `on Mouse Leave`? Example: I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from `#999` to `black`. How can I create the opposite effect when the mouse leaves the item area, with an animation from `black` to `#999`? jsFiddle (Have in mind that I do not wish to answer only this example, but the entire "opposite of `:hover`" issue.)

Original source