Cthulhu Cthulhu - 2 months ago 25
CSS Question

CSS: opposite of :hover (on mouse leave)?

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.)

Answer

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 definiation 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;
}