Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

css

hover

People also ask

How do you use transition properties?

Definition and Usage Tip: A transition effect could typically occur when a user hover over an element. Note: Always specify the transition-duration property, otherwise the duration is 0, and the transition will have no effect.

How do you hover off CSS?

To remove the CSS hover effect from a specific element, you can set the pointer-events property of the element (the hover behavior of which you want to disable) to “none”.

What is a hover button?

Alternatively referred to as mouseover or mouse hover, hover describes the act of moving a mouse pointer over a clickable object, but not actually clicking the left or right mouse button. For example, when you hover your mouse over any of the links on this page, they should change color, indicating they can be clicked.


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

Just use CSS transitions instead of animations.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Live demo


The opposite is using :not

e.g.

selection:not(:hover) { rules }


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.