Question

原来的jquery：

$('#container section').each(function() {
                $(this).waypoint(function(direction) {
                    var anchorRef = 'a[href="#' + this.id + '"]';
                    if (direction === 'down') {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
                    } else {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
                    }
                });
            });

CSS：

.main-menu ul li a:hover {
    background-color: #333;
}

问题在于，一旦该动画结束，如果我们返回该元素，则悬停效果不会再被应用。

有什么线索？

我试图像这样“强制”夸大脚本：

$('#container section').each(function() {
                $(this).waypoint(function(direction) {
                    var anchorRef = 'a[href="#' + this.id + '"]';
                    var anchorRefHover = 'a[href="#' + this.id + '"]:hover';//NEW
                    if (direction === 'down') {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(230, 77, 78)'});
                        $(anchorRefHover).css({backgroundColor : '#333'});//NEW
                    } else {
                        $(anchorRef).animate({'backgroundColor' : 'rgb(25, 25, 25)'});
                        $(anchorRefHover).css({backgroundColor : '#333'});//NEW
                    }
                });
            });

仍然失去了CSS上的悬停效果市场。

我在CSS悬停规则中添加了！important。这会触发悬停。但我之所以喜欢使用javascript，是因为， 悬停背景颜色仅适用于我们悬停的元素没有背景rgb（230,77,78）

不确定它是否会起作用，但我正考虑在上述情况下通过javascript添加！重要...但也许还有更好的方法？

任何帮助我的线索？

注意：这是小提琴，感谢koala_dev efford：

http://jsfiddle.net/talofo/5YgY5/5/

Answer 1

正如@DomDay在评论中指出的那样，jQuery .animate()使用覆盖CSS规则的内联样式，因此当你将颜色恢复为原始颜色时，一种解决方案就是删除内联语句：

$(anchorRef).animate({'backgroundColor': 'rgb(25, 25, 25)'},function(){
    $(this).removeAttr('style');
});

Working fiddle

javascript脚本执行后悬停状态背景颜色丢失

1 个答案: