Question

I have some code;

(function($) {

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

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

    });
})(jQuery);

Which is working well when combined with;

    <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>

However I have hit on a problem, when I mouseout I’m not sure what is the best method of removing or detaching the .active and both span classes.

I’ve tried adding $(this).remove(), but that is removing the list items from the dom.

How can I just remove the effects ( addClass(), append() and prepend() ) that where added in the original code?

Thanks in advance..

Answer 1

If you don’t have any other span in the tag, you can simply complete .hover parameter by adding the mouseleave handler like this :

$('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();
    }
);

see hover for more informations about parameters.

Edit: hover(fn1, fn2) is simply syntaxical sugar of calling .mouseenter(fn1).mouseleave(fn2)