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.
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”.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With