我正在尝试使用 jqueryUI 的 addClass() 和 removeClass() 设置悬停效果。
这就是我想出的:http://jsfiddle.net/5aS77/ .
如您所见,'onmouseout',背景暂时变为白色,然后再次'跳'为蓝色。
我只希望动画从蓝色变为粉色,反之亦然,没有任何“中断”。
我知道使用 CSS3 是可行的,虽然它有两个主要缺点,但我已经尝试过了:
1) 并不是所有的浏览器都支持transition属性。
2) 它没有 onmouseout 效果。 (虽然可以用一些JS来实现。)
最佳答案
白色闪光 是因为 jQuery 没有基色来设置动画,因为背景颜色是在 .nav
上设置的类而不是 <a>
元素。
您可以按如下方式编辑规则以去除白色闪光。
.nav a {
background-color:blue;
...
}
.nav .a_hover { // <--- need the .nav here otherwise CSS specificity results in blue still winning
...
}
此外,如果您愿意,这里有一个稍微简洁的 jQuery 实现:
$('a').on({
mouseenter:function() {
$(this).stop().animate({backgroundColor:'#f89ed5'}, 250);
},
mouseleave:function() {
$(this).stop().animate({backgroundColor:'blue'}, 250);
}
});
有了这个,.a_hover
可以删除类,尽管您仍然需要 background-color:blue
在 .nav a
上避免初始白色闪光的规则。 .a_hover
中的其他属性不需要,因为它们已经在 .nav a
上退出规则。
关于jQuery UI - addClass/removeClass : Unwanted white background 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11031319/