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

我想将mouseenter和mouseleave的处理程序绑定到使用jQuery选择器抓取的一组元素。该功能需要对元素的子元素进行操作。将处理程序绑定到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 /运/ FF/Safari浏览器，但在IE6和IE8，只有$(".topnav-link")选择器抓取的第一个元素显示所需的行为。

感谢您对我失踪的任何帮助！

来源

2009-10-21 akc

你可以做一些简单的事情，如只是警报（'事件触发'）;在绑定函数中，看看你的非第一个元素是否触发事件？ – 2009-10-21 19:50:49

除非我误解了你期望的行为，你上面的例子在IE8中对我很好：jsbin.com/axuve/edit#output – Matt 2009-10-21 20:25:07

感谢您采取一个看看和评论，你们俩。 Matt看到你的jsbin例子后，意识到我不得不在其他地方搜寻为什么我的行为没有被展示。我感到很傻，但事实证明，我用于我的PNG的修复程序并未完全应用于第一个链接中的所有修补程序，并且这些修复程序对它们的影响不会正确切换。再次感谢。 – akc 2009-10-21 20:48:50

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

有关更多信息，请阅读CSS Technique: Fast Rollovers Without Preload。

来源

2009-10-29 13:13:22

意识到这种技术，但... 设计要求是针对非网络字体中的可点击导航项目（因此必须是图像或SIFR），对可变背景透明，悬停时更改，与IE6兼容。您提到的CSS技术对于更简单的场景来说是一个明显的选择，您可以在A标签中使用文本。就我而言，文本必须是图像的一部分，所以使用CSS技术会使A标签为空。谢谢你提到它，但。对于遇到此线程的其他人来说，寻找干净，简单的悬停效果可能会有帮助。 – akc 2009-10-30 16:32:30

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

回答

相关问题