Question

我正在做幻灯片放映。并且幻灯片放映包含图像。当用户在图像上时，应显示跨度（包含链接）。如果用户从图像中移出，则跨度需要隐藏。

这很好用。问题是，虽然mouseenter显示了跨度。但我需要点击跨度内的链接。当我移动到那个链接时，我遇到问题，链接得到了震动。我相信这是因为onmouseenter事件。任何人都可以告诉我如何避免这个问题？

我使用了preventDefatul甚至停止stopPropagation，但是没有用。

这是我的jquery代码：

$(document).ready(function(){

$('span', '.case-study-slider').hide();

$('.case-study-slider img').bind('mouseenter', function(e){
   $(e.target).siblings('span').show();
   e.stopPropagation();
})
$('.case-study-slider img').bind('mouseleave', function(e){
    $(e.target).siblings('span').hide();
    e.stopPropagation();
})

}）;

这是我的HTML代码：

<div class="case-study-slider">  
   <span class="slider-player">  
       <a href="case-study-page-a.html"></a>
   </span>  
   <img height="270" width="702" alt="slider" src="images/slide-space-holder-type2.jpg" /></div>

跨度滑块播放器绝对位于图像上。

我需要的是：当用户进入图像时，我的跨度需要显示，他们可以点击链接移动我的幻灯片而不会在链接上摇晃。

任何人都可以帮助我？

Answer 1

麻烦在容器上，你必须把你的图像和span.slider-player放在同一个div中（就像它一样），但是把事件绑定到容器上..所以

$(document).ready(function(){
   $('span', '.case-study-slider').hide();
   $('.case-study-slider').bind('mouseenter', function(e){
      //$(e.target).siblings('span').show();
      $(this).children('span').show();
      e.stopPropagation();
   });
   $('.case-study-slider').bind('mouseleave', function(e){
      //$(e.target).siblings('span').hide();
      $(this).children('span').hide();
      e.stopPropagation();
   })
});

但我更喜欢这种方法：P

$(document).ready(function(){
   $('span', '.case-study-slider').hide();
   $('.case-study-slider').hover({
      function() {
         $(this).children('.slider-player').show();
      },
      function() {
         $(this).children('.slider-player').hide();
      }
   });
});

使用这种方法你不需要stopPropagation

我认为它有帮助

@modify：我忘了更改事件中的选择器，并添加了我的首选解决方案：）

jquery冒泡问题

1 个答案: