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

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

Answer 2

你应该试试那些：

使用mouseenter和mouseleave代替悬停。
在执行任何动画之前调用停止

$（本）.stop（真）.fadeTo（ “快”，0.3）;

Answer 3

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

.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');
});

<强> Demo

将span锚定在span中时会发生多个事件

3 个答案: