jquery - 在 mouseenter 上设置动画颜色(并在 mouseleave 上恢复为原始颜色)

Question

我有以下 jQuery 代码:-

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

所以基本上有一些盒子可以悬停，有些的字体颜色是黑色，有些是白色。当 nouseenter 时，它们都需要变白，当 mouseleave 时，它​​们需要恢复到原来的颜色。我已经尝试过上述方法，并尝试将文本颜色设置为 mouseleave 上的初始颜色，但无论我做什么，它们在 mouseleave 上都保持白色(而原始的黑色字体应该在 mouseleave 上变回黑色。

如果你看一下这个快速 JSFIDDLE我做的会让它比我试图解释的更清楚一点，提前感谢人们!

Answer 1

这里不需要任何 JS 代码，您只需使用 CSS 即可实现这一切:

.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