nsilva nsilva - 6 months ago 25
Javascript Question

Animate color on mouseenter (and revert back to original color on mouseleave)

I have the following jQuery code:-

jQuery(document).ready(function($) {
jQuery('.group-overlay').on('mouseenter mouseleave', function(e) {
var precolor;
if (e.type === "mouseenter") {
var precolor = jQuery(this).next('.test-service').find('.txt-sml').css("color");
jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
color: "#FFFFFF",
top: "+=40",
}, 300, function() {
// Animation complete.
});
} else if (e.type === "mouseleave") {
jQuery(this).next('.test-service').find('.txt-sml, .group-logo').animate({
color: "'" + precolor + "'",
top: "-=40",
}, 300, function() {
// Animation complete.
});
}
});
});


So basically there are boxes you can hover, some have font color black, some are white. On nouseenter they all need to go white, on mouseleave they need to go back to their original color. I have tried the above and tried setting the text color to initial on mouseleave but no matter what I do they stay white on mouseleave (where as the original black fonts should go back to black on mouseleave.

If you have a look at this quick JSFIDDLE I made it will make it a bit clearer than me trying to explain, thanks in advance people!

Answer

There's no need for any JS code here, you can achieve all this in CSS alone:

.test-service {
    transition: padding 0.5s;
    /* other properties... */
}

.group-overlay:hover + .test-service {
    padding-top: 40px;
}
.group-overlay:hover + .test-service .txt-sml {
    color: #FFF;
}

Working example