3

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

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

4

3 回答 3

4

白色闪烁是因为 jQuery 没有用于动画的基色，因为 background-color 是在类上设置的，而.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:blueon.nav a规则来避免最初的白色闪烁。.a_hover不需要中的其他属性，因为它们已经退出.nav a规则。

于 2012-06-14T11:08:45.683 回答
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");
    }​
于 2012-06-14T10:39:30.410 回答
1

如果您查看 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/

于 2012-06-14T10:48:54.413 回答