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

Question

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!

Answer 1

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

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