将处理程序绑定到jQuery对象中的元素以影响元素的子元素

Question

我想将mouseenter和mouseleave的处理程序绑定到使用jQuery选择器抓取的一组元素。该函数需要对元素的子元素进行操作。

这是我的代码：

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

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

这实际上在Mac / Win / FF / Safari上工作正常，但在IE6和IE8上，只有$(".topnav-link")选择器抓取的第一个元素才会显示所需的行为。

感谢您对我所缺少的任何帮助！

Answer 1

您应该使用CSS来实现所需的翻转效果。

请阅读CSS Technique: Fast Rollovers Without Preload了解详情。