jQuery循环元素上的jQuery悬停功能后switchClass失败

Question

我有一个使用 jQuery 循环插件作为滑动横幅的页面，每张幻灯片内部都有一个 div (#info)，其背景颜色在悬停时会显示动画。

我还尝试使用 switchClass 在页面上的三种配色方案之间进行切换，这也改变了#info 的背景颜色，在悬停在#info 上触发之前效果很好，之后 switchClass 按钮不再工作。

这是悬停的 jQuery：

$('#info.default').hover(function(){
        $('#info.default').stop().animate({backgroundColor: '#CDBF21'}, 300);
        $('#info.default .description').stop().animate({color: '#444'}, 300);
    }, function() {
        $('#info.default').stop().animate({backgroundColor: '#203E52'}, 300);
        $('#info.default .description').stop().animate({color: '#fff'}, 300);
    });

这里是 switchClass 部分：

$('.coral-green-button').click(function(){
        $('#info.default').stop().switchClass("default", "coral-green", 1000 );
        $('#info.green-blue').stop().switchClass("green-blue", "coral-green", 1000 ); 
    });

$('.green-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "green-blue", 1000 );
        $('#info.default').stop().switchClass("default", "green-blue", 1000);
    });

$('.mustard-blue-button').click(function(){
        $('#info.coral-green').stop().switchClass("coral-green", "default", 1000);
        $('#info.green-blue').stop().switchClass("green-blue", "default", 1000);
    });

谢谢！

Answer 1

我知道这并不完美，但这是朝着正确方向迈出的一步：

http://jsfiddle.net/Mutmatt/Q6zsm/19/

您的元素（悬停时）正在获得一个新的背景，该背景是一个特定于元素的属性，因此类级别的背景颜色不能覆盖它

更好：

http://jsfiddle.net/Mutmatt/Q6zsm/24/

最佳：

http://jsfiddle.net/Mutmatt/Q6zsm/49/

内嵌评论