Whats the best way to trigger just one rollover per link?

Whats the best way to trigger just one rollover per link rather than all on the page. See: htt开发者_开发知识库p://www.4pixels.com/web-design/xweb-design.html. At the moment obviously, any and all 'li a' on the page triggers my rollover. I want to have separate rollovers on each image triggered only by itself. Hope that makes sense.

<script type="text/javascript">
$(document).ready(function(){
  $(".content #display li a .caption").hide();
  $(".content #display li a").mouseenter(function(){
    $(".content #display li a .caption").slideDown(400);
  });
  $(".content #display li a").mouseleave(function(){
    $(".content #display li a .caption").slideUp(400);
  });
});
</script>

<ul id="display">
    <li><a href="/images/websites/PEX-BAFTA_2.jpg" rel="sexylightbox[group1]" title="Caption goes here"><img src="/images/websites/thumbs/PEX-BAFTA_2.jpg" alt="" /><div class ="caption">caption goes here</div></a></li>
</ul>

This should do the trick for you.

  $('.content #display li a').bind('mouseenter mouseleave',function() {
        $('.caption', this).slideToggle(400);
  });

The issue you were having is the event would fire and then you used a selector. Use this to return the element that fired the event. More or less...

In your event handlers, try using $(this).find(".caption").

$(".content #display li a").mouseenter(function(){
  $(this).find(".caption").slideDown(400);
});

I would use jquery's delegate to avoid multiple event handlers.

$("#display").delegate('a', 'mouseenter mouseleave', function(){
  $(this).find(".caption").slideToggle(400);
});

N.B I may also be tempted to use something like hover intent so you do not show your user an unsightly animation buildup if you swipe the mouse across the screen over lots of the images.