bind handler to elements in jQuery object to affect children of elements

I want to bind handlers for mouseenter and mouseleave to a set of elements grabbed using the jQuery selector. The function needs to act on the children of the elements.

Here is my code:

$(document).ready(function(){
    $(".topnav-link").bind("mouseenter mouseleave", function() {
        $(this).children(".topnav").toggle();
    });
});

and in the body of the html:

<ul id="nav">
    <li>
        <a class="topnav-link" href="some-url">
            <img class="topnav" src="nav-about-us.png" />
            <img class="topnav hidden" src="/images/site/nav-about-us-on.png" />
        </a>
    </li>
    <li>
        <a class="topnav-link" href="some-url'}">
            <img class="topnav" src="nav-products.png" />
            <img class="topnav hidden" src="/images/site/nav-products-on.png" />
        </a>
    </li>
    <li>
        <a class="topnav-link" href="some-url">
            <img class="topnav" src="nav-contact.png" />
            <img class="topnav hidden" src="/images/site/nav-contact-on.png" />
        </a>
    </li>
</ul>

开发者_运维百科This actually works fine on Mac/Win/FF/Safari, but on IE6 and IE8, only the first element grabbed by the $(".topnav-link") selector displays the desired behavior.

Thanks for any help as to what I'm missing!

You should use CSS to achieve the desired roll-over effects.

Please read CSS Technique: Fast Rollovers Without Preload for more information.