Cthulhu Cthulhu - 1 year ago 190
CSS Question

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

Is there any way to do the opposite of

using only CSS? As in: if
on Mouse Enter
, is there a CSS equivalent to
on Mouse Leave


I have a HTML menu using list items. When I hover one of the items, there is a CSS color animation from
. How can I create the opposite effect when the mouse leaves the item area, with an animation from


(Have in mind that I do not wish to answer only this example, but the entire "opposite of
" issue.)

Answer Source

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 {
    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 {
    cursor: pointer;


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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download