Javascript/jQuery mouseover和mouseout事件監聽器

不知道如何解決我目前遇到的問題。我正在構建一個Javascript和PHP驅動的圖像庫。基本的div結構是，我有一個包含整個圖庫的div，一個用於顯示圖像，一個div包含「上一個按鈕」，另一個包含「下一個按鈕」。Javascript/jQuery mouseover和mouseout事件監聽器

下一個/上一個按鈕位於圖像容器div底部的左側/右側（圖庫容器設置爲相對位置，按鈕div爲絕對）。默認情況下，它們使用jQuery不可見，並且當您將鼠標懸停在圖像容器div上時變爲可見。我遇到的問題是，當您將鼠標懸停在容器div上，然後通過箭頭時，過渡效果會重新播放，而我不確定如何使用HTML/CSS/JS來修復該問題。我對目前的div結構

<div id="galleryContainer"> 
    <div id="imageContainer"> 
    <img src="img" /> 
    </div> 
    <div id="leftArrow"></div> 
    <div id="rightArrow"></div> 
</div>

我如何使它所以我的淡入/淡出效果停止作用，當我將鼠標懸停在下一/上一個按鈕，所有的竊聽？我嘗試了一些使用「onmouseover」偵聽器的組合，當我建立div時，使用jQuery偵聽器，試圖改變drivs的層次結構。任何幫助，將不勝感激！

編輯：這是我想要做我當前的jQuery代碼：

$(document).ready(function(){ 

$("#imageContainer").mouseover(function() 
{ 
    $("#leftArrow").fadeIn(); 
    $("#rightArrow").fadeIn(); 
}); 

$("#galleryContainer").mouseout(function() 
{ 
    $("#leftArrow").fadeOut(); 
    $("#rightArrow").fadeOut(); 
}); 
});

當我把按鈕它仍然沒有褪色的bug /效果imageContainer內。

來源

2012-05-11 Brandon.B

哪裏是你的代碼中發生的處理程序叫什麼名字？ –

是的，您可以添加您的JavaScript代碼和任何相關的CSS嗎？ – carols10cents

如果您可以在www.jsFiddle.net上覆制問題，那麼我們最容易爲您提供幫助。 –

你可能想使用$.mouseleave和$mousenter一問題在於mouseout和mouseover事件冒泡。然後，當這些事件上#galleryContainer發射時，它在它的任何繼承

http://jsfiddle.net/z2Y8a/20/

$("#imageContainer").mouseenter(function() { 
    $("#leftArrow").fadeIn(); 
    $("#rightArrow").fadeIn(); 
}); 

$("#galleryContainer").mouseleave(function() { 
    $("#leftArrow").fadeOut(); 
    $("#rightArrow").fadeOut(); 
});

來源

2012-05-11 21:39:35

謝謝！ $ .mouseleave事件監聽器正是我所需要的！ –

您還應該使用'$ .mouseenter'，因此當您將鼠標移動到圖像上時，它不會嘗試淡入。你什麼都看不到，但你仍然在浪費週期 –

這就是我沒有看到任何代碼解釋你的問題。讓我知道。
我給div添加了顏色，所以你可以看到哪個位置。

的jsfiddle：http://jsfiddle.net/z2Y8a/19/

<div id="galleryContainer" style="width:200px;height:200px;background:green;"> 
    <div id="imageContainer" style="width:50px;height:100px;background:blue;"> 
     <div style="height:75px;"> 
      <img src="img" /> 
     </div> 
     <div id="leftArrow" style="width:25px;height:25px;background:red;float:left;display:none;">L</div> 
     <div id="rightArrow" style="width:25px;height:25px;background:yellow;float:left;display:none;">R</div> 
    </div> 
</div> 

<script> 
    $("#imageContainer").hover(function() 
    { 
     $("#leftArrow").toggle(); 
     $("#rightArrow").toggle(); 
    }); 
</script>

- 編輯 -

$("#galleryContainer").hover(function() 
{ 
    $("#leftArrow").toggle(); 
    $("#rightArrow").toggle(); 
});

來源

2012-05-11 20:41:46

將我的代碼添加到原始問題 –

@LeonP編輯了我的答案，這應該可以解決您的問題。不要忘記接受解決問題的答案:) –

如果你的箭是你的形象容器內它不會閃爍。或者，也可以在主圖庫容器中放置顯示箭頭效果。基本上，當你的鼠標放置圖像容器時，它會觸發鼠標移出。當我說離開我的意思是在代碼感，視覺上不會離開，因爲你擁有它定位不同，但在代碼的意義，您的鼠標離開圖像容器並進入箭頭集裝箱

來源

2012-05-11 21:02:08 Huangism

Javascript/jQuery mouseover和mouseout事件監聽器

回答

相關問題