3

jqueryUIのaddClass（）とremoveClass（）を使用してホバー効果を設定しようとしています。
これは私が思いついたものです：http：//jsfiddle.net/5aS77/。
ご覧のとおり、「onmouseout」では、背景がしばらく白になり、その後「ジャンプ」して再び青になります。
アニメーションを「中断」せずに青からピンク、またはその逆に変更したいだけです。

CSS3で可能であることはわかっていますが、2つの主な短所がありますが、すでに試しました
。1）すべてのブラウザーがtransitionプロパティをサポートしているわけではありません。
2）マウスアウト効果はありません。（ただし、一部のJSで実現できます。）

4

3 に答える 3

4

白いフラッシュは、背景色が要素.navではなくクラスに設定されているため、jQueryにアニメーション化する基本色がないためです。<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ルール上に存在するため、必要ありません。

于 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 に答える