Javascript/jQuery mouseover и mouseout Слушатели событий

Question

Не знаете, как решить проблему, которую я имею на данный момент. Я создаю галерею изображений с поддержкой Javascript и PHP. Основная структура div состоит в том, что у меня есть div, который содержит галерею в целом, одну для отображаемого изображения и div, содержащую «предыдущую кнопку», а другую, содержащую «следующую кнопку».

Следующие/предыдущие кнопки расположены слева/справа в нижней части контейнера div изображения (контейнер галереи установлен в относительное положение, кнопка делится на абсолютную). По умолчанию они становятся невидимыми с помощью jQuery и становятся видимыми, когда вы наводите курсор на div div изображения. Проблема, с которой я сталкиваюсь, - это когда вы наводите курсор на контейнер div, а затем на стрелки, эффект перехода воспроизводится, и я не уверен, как исправить это с помощью HTML/CSS/JS. Моя текущая структура для дивы является

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

Как сделать так, мой FadeIn/выходом эффекта останавливается действует все прослушивается, когда я наведите курсор мыши на следующие кнопки/предыдущих? Я попробовал кучу комбинаций использования прослушивателей onmouseover, когда я устанавливаю div, используя jQuery-слушателей, чтобы попытаться изменить иерархию drivs. Любая помощь будет оценена!

Edit: Вот мой текущий JQuery код, что я пытаюсь сделать:

$(document).ready(function(){ 

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

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

Когда я ставлю кнопки внутри imageContainer она по-прежнему делает перепыла ошибка/эффект.

Answer 1

Возможно, вы захотите использовать $.mouseleave и $mousenter A проблема в том, что мышиные события и мышиные события пузырятся. Тогда ваши обработчики вызываются, когда эти события произвели на #galleryContainer, когда это происходит в любом из его потомков

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

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

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

Answer 2

Вот как я интерпретировал ваш вопрос, не видя никакого кода. Дайте мне знать.
Я добавил цвета в divs, чтобы вы могли видеть, где находится.

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> 

- EDIT -

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

Answer 3

Это не мерцает, если ваши стрелы внутри вашего контейнера изображения. Или, может быть, эффект шоу-шоу в главном контейнере галереи. В основном, когда ваша мышь сохраняет контейнер изображения, он вызывает подсказку. Когда я говорю «уезжаю», я имею в виду смысл кода, визуально он не уходит, потому что вы располагаете его по-другому, но в смысле кода, ваша мышь оставила контейнер изображения и входила в контейнеры стрелок.