Animating mouse leave with CSS and jQuery?
1) You change your css to
div { width: 100px; height: 100px; background: red; transition: background 0.5s ease-in-out;}div:hover { background: green;}setting the transition to the element, and not the pseudo class.
2)
With jQuery you'll either need two elements to cross fade, or a color animation plugin. jQuery UI has color animation built in, and then you can do :
$('div').on({ mouseenter: function() { $(this).animate({backgroundColor: 'green'},1000) }, mouseleave: function() { $(this).animate({backgroundColor: 'red'},1000) }});If you're not already using jQuery UI for something else, I'd suggest using one of the much smaller plugins, like this one !!
This should solve your problem
div { width: 100px; height: 100px; background-color: red; transition: background-color 0.5s;}div:hover { background-color: green;}