將鼠標懸停在範圍內時發生多個事件

我試圖在懸停時對圖像製作顏色，同時我希望刪除圖標出現在圖像上方，我面對的問題是，當鼠標放在刪除圖標上時，許多事件不斷髮生。將鼠標懸停在範圍內時發生多個事件

這裏是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

來源

2013-01-08 palAlaa

什麼用懸停的在刪除時，當它已經顯示，當你把它懸停在圖像上？ –

試試這個代碼：

$(".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){

你單擊事件結合這兩者不需要的元素。

來源

2013-01-08 07:39:29 Jai

哇它的工作原理，然後這個選擇器$（「。imgOverlay> .delete」）並不意味着選擇.delete只！它也選擇它的父母 – palAlaa

那麼'.imgOverlay'不是父母它是'.delete'的兄弟，如果這符合你的需要，那麼這兩個父母都有父母'.imageContent' – Jai

那麼你可以接受它作爲答案：） – Jai

你應該嘗試的：

使用老鼠輸入和mouseleave而不是懸停。之前執行的任何動畫

$（本）.stop（真）.fadeTo（「快」，0.3）
通話停止;

來源

2013-01-08 07:38:43 phnkha

您可以控制的.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'); 
});

Demo

來源

2013-01-08 07:41:49 3dgoo

將鼠標懸停在範圍內時發生多個事件

回答

相關問題