Каков наилучший способ вызвать только один ролловер на ссылку?

Question

Что является лучшим способом вызвать только один ролловер на ссылку, а не все на странице.См .: http://www.4pixels.com/web-design/xweb-design.html. В настоящий момент, очевидно, любое и все 'li a' на странице вызывает мой ролловер.Я хочу, чтобы отдельные ролловеры на каждом изображении запускались только сами по себе.Надеюсь, что это имеет смысл.

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

Answer 1

В ваших обработчиках событий попробуйте использовать $ (this) .find (". Caption").

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

Answer 2

Я бы использовал jquery делегат , чтобы избежать нескольких обработчиков событий.

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

NB. У меня также может возникнуть соблазн использовать что-то вроде hover intent , поэтому вы не покажете своему пользователю неприглядную анимацию, если вы проведете мышью по экрану по множествуизображения.

Answer 3

Это должно помочь вам.

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

Проблема, с которой вы столкнулись, состояла в том, что событие сработало, а затем вы использовали селектор. Используйте this , чтобы вернуть элемент, вызвавший событие. Более или менее ...