jquery - 将锚点悬停在跨度内时发生多个事件

Question

我试图在悬停时为图像上色，我也希望删除图标出现在图像上，我面临的问题是当鼠标悬停在删除图标上时，许多事件不断发生。

这是HTML

 <span class="imageContent" >
  <a  class="imgOverlay" href="http://4.bp.blogspot.com/-yAOYE3-J1mo/TmsnBJ6ucYI/AAAAAAAABcA/5ZKqEv3p-6I/s1600/36676-sky_blue.jpg" target="_blank" >
       <img src="http://4.bp.blogspot.com/-yAOYE3-J1mo/TmsnBJ6ucYI/AAAAAAAABcA/5ZKqEv3p-6I/s1600/36676-sky_blue.jpg" />
   </a>
    <a href="" name="deleteImg" class="delete">delete</a>
 </span>

这是js

 $(".imgOverlay > img").hover(function(e){

    $(this).fadeTo("fast",0.3);
    $('.delete').css('display','inline-block');
},function(e){

    $(this).fadeTo("fast",1.0);
    $('.delete').css('display','none');
});

$(".imgOverlay > .delete").hover(function(e){


    $('.delete').css('display','inline-block');
},function(e){ 
    $('.delete').css('display','none');
});


$('.imgOverlay .delete').click(function(e){
  alert('click');
});

这是一个现场示例 http://jsbin.com/asehuq/1/edit

Answer 1

试试这个代码：

$(".delete").hover(function (e) {
  //e.stopPropagation(); <----this is not required because your element is not 
  //                          the child of the ".imgOverlay"
  e.preventDefault();

  $('.delete').css('display', 'inline-block');
}, function (e) {
  $('.delete').css('display', 'none');
});


$('.delete').click(function (e) {
  alert('click');
});

事实上，您将事件绑定到导致问题的两个项目。

我的意思是看到这个：

$(".imgOverlay > .delete").hover(function(e){

根据您的标记.delete不是.imOverlay.

这里：

$('.imgOverlay .delete').click(function(e){

您将单击事件绑定到两个不需要的元素。

Answer 2

你应该试试这些：

• 使用 mouseenter 和 mouseleave 而不是悬停。

• 在执行任何动画之前调用 stop

  $(this).stop(true).fadeTo("fast",0.3);

Answer 3

.delete您可以使用 css 而不是 javascript来控制显示：

.imageContent:hover .delete {
    display: inline-block;
}

然后将其用于您的 javascript：

$('.imageContent').hover(function(e){
    $(this).find('img').fadeTo("fast",0.3);
},function(e){
    $(this).find('img').fadeTo("fast",1.0);
});

$('.imageContent .delete').click(function(e){
    alert('click');
});

演示