jQuery - 實例mouseenter和有特例的mouseleave

你好，我的代碼工作正常，但我不希望它在#stem和#case懸停在...上因爲它們是動畫的一部分...（它們絕對定位在div_mainGraphic上）。有人有主意嗎？謝謝！jQuery - 實例mouseenter和有特例的mouseleave

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){ 
    if (event.type == 'mouseenter') { 
     $('#stem').animate({"top": "-=35px"}, 500); 
    } else { 
     $('#stem').animate({"top": "+=35px"}, 150); 
    } 
});

是工作的代碼，我想在做這樣的事情的：

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){ 
    if (event.type == 'mouseenter') { 
     $('#stem').animate({"top": "-=35px"}, 500); 
    } 
    if (event.type == 'mouseleave') { 
     $('#stem').animate({"top": "+=35px"}, 150); 
    } 
    if (event.location == '???') { 
     ??? 
    } 
});

這裏是HTML：

<div id="div_mainGraphic"> 
</div> 
<img src="/images/img_stem.png" id="stem" /> 
<img src="/images/img_case.png" id="case" />

來源

2011-08-16 webwrks

與您的代碼一起試試這個，這基本上會停止懸停時的事件傳播。

$("#stem, #case").hover(function(e){ 
    e.stopPropagation(); 
});

用你

$('#div_mainGraphic').live("mouseenter mouseleave", function(event){ 
    if (event.type == 'mouseenter') { 
     $('#stem').animate({"top": "-=35px"}, 500); 
    } else { 
     $('#stem').animate({"top": "+=35px"}, 150); 
    } 
});

另外，您也可以嘗試#stem和#case元素進入#div_mainGraphic因爲它們是絕對定位元素的驗證碼。在我的代碼

來源

2011-08-16 23:38:55 ShankarSangoli

不幸的沒有做到這一點...但它是讓我覺得它應該是類似的東西。這對你有用嗎？這首先來嗎？ – webwrks

由於#stem和#case是絕對定位的元素，你可以將它們追加到#div_mainGraphic中嗎？這樣，mouseenter和mouseleave在你捧着它們時仍然會觸發相同的事件。 – ShankarSangoli

你的意思是將它們移動或使其成爲#div_mainGraphic選擇器的一部分？謝謝 – webwrks

絕對簡單易讀的解決方案：

$('.free').live('mouseenter', function() { 
    $(this).find('.alert').fadeIn(200); 
}); 

$('.free').live('mouseleave', function() { 
    $(this).find('.alert').fadeOut(200); 
});

來源

2013-01-15 09:13:06 antiqe

jQuery - 實例mouseenter和有特例的mouseleave

回答

相關問題