将处理程序绑定到jQuery对象中的元素以影响元素的子元素 [英] bind handler to elements in jQuery object to affect children of elements

问题描述

我想将mouseenter和mouseleave的处理程序绑定到使用jQuery选择器获取的一组元素上.该功能需要作用于元素的子元素.

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.

这是我的代码:

$(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")选择器抓取的第一个元素显示所需的行为.

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!

推荐答案

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

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

有关详细信息，请阅读 CSS技术:无预加载的快速过渡.

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

这篇关于将处理程序绑定到jQuery对象中的元素以影响元素的子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！