I had a situation where I had to animate an element only during mouse leave through CSS only. I tried everything but was not successful. I searched over the internet and got nothing other than using another class through JavaScript or jQuery during mouse leave action. I think it would have been much easier and handy for CSS designers if they had one such selector that could do it without using JavaScript.
The only options we have in CSS are:
:hover selector – used to select elements when you mouse over them. This is the simplest and straightforward way to select hovered items as we all know.
.item:hover {
/* rules here */
}The other way to select a non-hover state is using a “:not” selector. This is another way to write code but the above method is better than this. You can use this as a hack statement.
.item:not(:hover) {
/* rules here */
} Another option is to use CSS transitions instead of animations. So when use hover’s out of the element then it will switch back to it’s original state with a transition that will look like a small animation in itself.
.item {
background-color: #000;
transition:1s;
}
.item:hover {
background-color: #cecece;
}But if you want to animate items differently only on mouse leave then you will need to look at a JS / jQuery for the solution.