每个链接只触发一次翻转的最佳方法是什么？答案

【问题标题】：Whats the best way to trigger just one rollover per link?每个链接只触发一次翻转的最佳方法是什么？
【发布时间】：2011-04-05 13:52:56
【问题描述】：

每个链接只触发一次翻转而不是页面上全部触发的最佳方式是什么？请参阅：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>

【问题讨论】：

请尝试为您的问题选择更具描述性的标题。

标签： jquery mouseenter

【解决方案1】：

这应该对你有用。

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

您遇到的问题是事件会触发，然后您使用了选择器。使用 this 返回触发事件的元素。或多或少...

【讨论】：

【解决方案2】：

在您的事件处理程序中，尝试使用 $(this).find(".caption")。

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

【讨论】：

【解决方案3】：

我会使用 jquery 的delegate 来避免多个事件处理程序。

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

注意，我也可能想使用 hover intent 之类的东西，这样当您在屏幕上滑过大量图像时，就不会向用户展示难看的动画。

【讨论】：