Question

我在使用上一个和下一个按钮的工作动作中有一个jQuery滑块。唯一的问题是，我想要它，以便当您将鼠标悬停在这些按钮上时，会显示下一张或上一张幻灯片的预览，当您将鼠标移开时，它们会隐藏。我似乎无法让它工作......

$('.next_slide').mouseenter(function() {
   $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');                            
});

我的HTML是......

<div id="slides">
   <ul class="slide_container">
      <li class="one slide"></li>
      <li class="two slide"></li>
      <li class="three slide"></li>
   </ul>
   <div id="slide_nav">
      <a href="#" class="prev_slide">&laquo; Previous</a>
      <a href="#" class="next_slide">Next &raquo;</a>
   </div>
</div>

幻灯片的宽度为1440像素。

Answer 1

试试这个 -

$('.next_slide').hover(
  function(){ // OVER
    $('.slide_container li').stop().animate({ left: -440 }, 10, 'easeInOutExpo');
  },
  function(){ // OUT
    $('.slide_container li').stop().animate({ left: 0 }, 10, 'easeInOutExpo');
  }
);

Answer 2

你只有mouseenter，而不是mouseout;你应该定义两者。
如果使用Hover，则可以在同一脚本中包含这两个操作。

例如（来自jQuery网站）：

$("li").hover(
  function () {
    $(this).append($("<span> ***</span>"));
  }, 
  function () {
    $(this).find("span:last").remove();
  }
);

jQuery列表悬停

2 个答案: