0

私はいくつかのコードを持っています。

(function($) {

    $('nav.top ul li').hover(function() {

        $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>');

    });
})(jQuery);

と組み合わせるとうまく機能します。

    <nav class="top">
        <ul>
            <li>
                <a href="index.php">Home</a>
            </li>
            <li>
                <a href="events.php">Events</a>
            </li>
            <li>
                <a href="marketingguidance.php">Marketing</a>
            </li>
            <li>
                <a href="news.php">News</a>
            </li>
            <li>
                <a href="salestoolkit.php">Sales</a>
            </li>
        </ul>
    </nav>

ただし、問題が発生しました。マウスアウトすると、.activeクラスと両方のスパンクラスを削除またはデタッチするための最良の方法がわかりません。

追加しようとしまし$(this).remove()たが、それはdomからリストアイテムを削除しています。

元のコードで追加されたエフェクト（addClass（）、append（）、prepend（））を削除するにはどうすればよいですか？

前もって感謝します..

4

3 に答える 3

1

タグに他のスパンがない場合は、次のようにmouseleaveハンドラーを追加することで.hoverパラメーターを完了することができます。

$('nav.top ul li').hover(
    function() {
        $(this).addClass('active')
               .append('<span class="rightImage"></span>')
               .prepend('<span class="leftImage"></span>');

    },
    function() {
        $(this).removeClass('active').children("span").remove();
    }
);

パラメータの詳細については、ホバーを参照してください。

編集： hover（fn1、fn2）は、.mouseenter（fn1）.mouseleave（fn2）を呼び出すための単純な構文上の砂糖です。

于 2012-05-04T11:53:26.000 に答える
1

マウスアウトで試してみてください

$(this).removeClass("active").children("span").remove();

jsFiddle

于 2012-05-04T11:47:43.957 に答える
1

たぶん、の代わりにmouseover()とを使用して、次のようなことを試してみてください。mouseout()hover()

$('nav.top ul li').mouseover(function() {
    $(this).addClass('active').append('<span class="rightImage"></span>').prepend('<span class="leftImage"></span>');
});

$('nav.top ul li').mouseout(function() {
    $(this).removeClass('active').children("span").remove();
});
于 2012-05-04T11:50:40.973 に答える