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 和两个 span 类的最佳方法是什么。

我试过添加$(this).remove()，但这是从 dom 中删除列表项。

我怎样才能删除在原始代码中添加的效果（ addClass()、append() 和 prepend() ）？

提前致谢..

4

3 回答 3

1

也许你可以使用mouseover()andmouseout()而不是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 回答
1

试试，鼠标悬停

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

jsFiddle

于 2012-05-04T11:47:43.957 回答
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 回答