鼠标中心的动画颜色(并在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;
}

工作实例