jQuery UI - addClass/removeClass 的问题：不需要的白色背景

Question

我正在尝试使用 jqueryUI 的 addClass() 和 removeClass() 设置悬停效果。
这就是我想出的：http://jsfiddle.net/5aS77/ .
正如你所看到的，“onmouseout”，背景会变成白色一段时间，然后“跳”到蓝色。
我只希望动画从蓝色变为粉色，反之亦然，没有任何“中断”。

我知道 CSS3 是可能的，尽管它有 2 个主要缺点，但我已经尝试过：
1) 并非所有浏览器都支持过渡属性。
2）它没有onmouseout效果。 （虽然可以通过一些 JS 来实现。）

Answer 1

白色闪光是因为 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 类可以被删除，尽管你仍然需要.nav a 规则上的background-color:blue 来避免最初的白色闪烁。 .a_hover 中的其他属性不需要，因为它们已经在 .nav a 规则上退出。

Answer 2

如果您查看 jquery 文档，您会看到有一个悬停事件 - 如果您要使用 jquery，则值得充分利用它。 (http://api.jquery.com/hover/)。

说不用js也能达到同样的效果：

.nav a {
    display:block;
    float:left;
    text-decoration:none;
    text-shadow:1px 1px #FFF;
    height:31px;
    width:auto;
    color: #000;
    padding: 11px 20px 0 20px;
    overflow:hidden;
}
.nav a:hover{
    display:block;
    overflow:hidden;
    background-color:#f89ed5;
    text-shadow:1px 1px #FFF;
    padding: 11px 20px 0 20px;
}​

回答问题：

删除数字，例如

function hoverHandler() {
                $(this).addClass("a_hover");
            }

            function outHandler() {
                $(this).removeClass("a_hover");
            }​

http://api.jquery.com/addClass/

Answer 3

演示： Jsfiddle

 var links = document.getElementsByTagName("a");
    for(var i = 0; i < links.length; i++) {
        links[i].onmouseover = hoverHandler;
        links[i].onmouseout = outHandler;
    }

    function hoverHandler() {
        $(this).addClass("a_hover",250);
    }

    function outHandler() {
        $(this).removeClass("a_hover");
    }​