What is the opposite of hover on mouse leave

Question

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

User · Answer

Just add a transition and the name of the animation on the class inicial, in your case, ul li a, just add a "transition" property and that is all you need

_x000D_

ul li {_x000D_
    display: inline;_x000D_
    margin-left: 20px;_x000D_
}_x000D_
_x000D_
ul li a {_x000D_
    color: #999;_x000D_
    transition: 1s;_x000D_
    -webkit-animation: item-hover-off 1s;_x000D_
    -moz-animation: item-hover-off 1s;_x000D_
    animation: item-hover-off 1s;_x000D_
}_x000D_
_x000D_
ul li a:hover {_x000D_
    color: black;_x000D_
    cursor: pointer;_x000D_
    -webkit-animation: item-hover 1s;_x000D_
    -moz-animation: item-hover 1s;_x000D_
    animation: item-hover 1s;_x000D_
}_x000D_
_x000D_
@keyframes item-hover {_x000D_
    from {_x000D_
      color: #999;_x000D_
      }_x000D_
    to {_x000D_
      color: black;_x000D_
      }_x000D_
}_x000D_
    _x000D_
@-moz-keyframes item-hover {_x000D_
    from {_x000D_
        color: #999;_x000D_
      }_x000D_
    to {_x000D_
        color: black;_x000D_
      }_x000D_
}_x000D_
    _x000D_
@-webkit-keyframes item-hover {_x000D_
    from {_x000D_
        color: #999;_x000D_
      }_x000D_
    to {_x000D_
        color: black;_x000D_
      }_x000D_
}_x000D_
_x000D_
@keyframes item-hover-off {_x000D_
    from {_x000D_
      color: black;_x000D_
      }_x000D_
    to {_x000D_
      color: #999;_x000D_
      }_x000D_
}_x000D_
    _x000D_
@-moz-keyframes item-hover-off {_x000D_
    from {_x000D_
        color: black;_x000D_
      }_x000D_
    to {_x000D_
        color: #999;_x000D_
      }_x000D_
}_x000D_
    _x000D_
@-webkit-keyframes item-hover-off {_x000D_
    from {_x000D_
        color: black;_x000D_
      }_x000D_
    to {_x000D_
        color: #999;_x000D_
      }_x000D_
}

_x000D_

<ul>_x000D_
    <li><a>Home</a></li>_x000D_
    <li><a>About</a></li>_x000D_
    <li><a>Contacts</a></li>_x000D_
</ul>

_x000D_

User · Answer

Although answers here are sufficient  I really think W3Schools example on this issue is very straightforward  it cleared up the confusion  for me  right away       Use the  hover selector to change the style of a button when you move   the mouse over it       Tip  Use the transition-duration property to determine the speed of   the  hover  effect       Example   button       -webkit-transition-duration  0 4s     Safari  amp  Chrome        transition-duration  0 4s      button hover       background-color   4CAF50     Green        color  white       In summary  for transitions where you want the  enter  and  exit  animations to be the same  you need to employ transitions on the main selector  button rather than the hover selector  button hover  For transitions where you want the  enter  and  exit  animations to be different  you will need specify  different main selector and hover selector transitions

User · Answer

Put your duration time in the non-hover selection   li a     background-color   111    transition 1s     li a hover     padding 19px

User · Answer

Just use CSS transitions instead of animations   A       color   999      transition  color 1s ease-in-out     A hover       color   000      Live demo

User · Answer

Just add a transition to the element you are messing with  Be aware that there could be some effects when the page loads  Like if you made a border radius change  you will see it when the dom loads    x000D   x000D   element   x000D    width  100px  x000D    transition  all ease-in-out 0 5s  x000D    x000D    x000D    element hover   x000D    width  200px  x000D      transition  all ease-in-out 0 5s  x000D    x000D   x000D   x000D

User · Answer

You have misunderstood  hover  it says the mouse is over an item  rather than the mouse has just entered the item   You could add animation to the selector without  hover to achieve the effect you want   Transitions is a better option  http   jsfiddle net Cvx96

User · Answer

The opposite of  hover appears to be  link     edit  not technically an opposite because there are 4 selectors  link   visited   hover and  active  Five if you include  focus    For example when defining a rule  button hover  text-decoration none   to remove the underline on a button  the underline shows up when you roll off the button in some browsers  I ve fixed this with  button hover   button link  text-decoration none    This of course only works for elements that are actually links  have href attribute

User · Answer

The opposite is using  not e g  selection not  hover    rules

User · Answer

You can use CSS3 transition   Some good links   http   css-tricks com different-transitions-for-hover-on-hover-off   http   www alistapart com articles understanding-css3-transitions

User · 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 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

User · Answer

No there is no explicit property for mouse leave in CSS    You could use  hover on all the other elements except the item in question to achieve this effect  But Im not sure how practical that would be    I think you have to look at a JS   jQuery solution

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

Examples related to css

Examples related to hover