проблема с mouseenter и mouseleave с jquery

Question

У меня есть родительский div 'A' и при наведении, что div будет отображаться еще один div 'B', и этот второй div не является дочерним div.It является отдельным div.Both divs расположены абсолютно.

На мыши оставляем второй div, который является «B», он должен исчезать. Но он не исчезает. Фактически я не уверен, возможно ли это, потому что, когда вы покидаете второй div, вы по-прежнему над первым div, и это почему функция mousenter по-прежнему срабатывает.

HTML код

<div class="portitem">Some content</div> 
<div class="overlaygallery"></div> 

CSS

.portitem { 
    position:absolute; 
    width:200px; 
    height:200px; 
    background:#000; 
} 
.overlaygallery { 
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9); 
    height: 150px; 
    margin-left: 25px; 
    margin-right: 15px; 
    margin-top: 25px; 
    position: absolute; 
    width: 150px; 
    z-index: 999; 
    display:none; 
} 

JQuery

$('.portitem').mouseover(function() { 
    $('.overlaygallery').css("display", "block"); 

}); 

$(".overlaygallery").mouseleave(function() { 
    $(this).css("display", "none"); 
}); 

Я создал скрипку. Это http://jsfiddle.net/squidraj/Gyn8c/

Есть ли какие-либо другие трюки. Пожалуйста, предлагайте. Спасибо заранее.

Answer 1

Вот что вы хотели:. http://jsfiddle.net/Gyn8c/11/

Я должен был сделать их родители и ребенок. Это выглядит так же, и делает то, что вы хотели.

$('.overlaygallery').mouseout(function() { 
    $(this).hide(); 
}); 

$('.portitem'). 
    mouseenter(function() { $('.overlaygallery').show(); }). 
    mouseleave(function() { $('.overlaygallery').hide(); }); 

Answer 2

Вы можете использовать функцию hover jQuery, которая принимает 2 параметра, что делать с mouseenter и что делать с mouseleave. Это выглядит примерно так: Остальная логика может быть помещена внутри этих функций.

$ ("# Идентификатор") парить (функция() {}, функция() {})

Answer 3

$('.portitem').hover(function() { 
    $('.overlaygallery').css("display", "block"); 
    },function() { 
    $('.overlaygallery').css("display", "none"); 
}); 

$('.overlaygallery').mouseout(function() { 
    $(this).hide(); 
}); 

Answer 4

Чтение всего этого обсуждения выглядит, вам нужно показать DIV B при наведении курсора мыши на сОн B, затем с непрозрачностью подходом, если вы выполняете что-либо на основе видимости сНа или отображения в любом месте кода.

$('.overlaygallery').hover(function() { 
    $(this).stop().animate({ 
     opacity: 1 
    }); 
}, 

function() { 
    $(this).stop().animate({ 
     opacity: 0 
    }); 
}); 

.portitem { позицию: абсолютная; ширина: 200px; высота: 200px; фон: # 000; }

.overlaygallery { 
    background: none repeat scroll 0 0 rgba(255, 255, 204, 0.9); 
    height: 150px; 
    margin-left: 25px; 
    margin-right: 15px; 
    margin-top: 25px; 
    position: absolute; 
    width: 150px; 
    z-index: 999; 
    opacity :0; 
} 

demo

Answer 5

Существовали две проблемы с вашим кодом:

1. скрытые элементы не срабатывают mouseenter/mouseleave события. Чтобы обойти это, можно использовать непрозрачность, которая имеет довольно хорошую поддержку кросс-браузера.
2. portitem mouseover запускался сразу после overlaygallery mouseleave, поэтому, когда последний попытался скрыть себя, portitem покажет его снова. Вы можете обойти это, используя eventData, предоставленную jQuery, в частности свойство toElement.

Это немного многословным и не очень элегантно, но это именно то, что вы были после, если я правильно понял:

var cancelMouseOver = false; 

$('.portitem').mouseenter(function (e) { 
    if(!cancelMouseOver) { 
     $('.overlaygallery').css("opacity", 1); 
    } else { 
     cancelMouseOver = false; 
    } 
}); 

$('.portitem').mouseleave(function (e) { 
    $('.overlaygallery').css("opacity", 0); 
}); 

$(".overlaygallery").mouseenter(function (e) { 
    $(this).css("opacity", 1); 
}); 

$(".overlaygallery").mouseleave(function (e) { 
    $(this).css("opacity", 0); 

    if($(e.toElement).hasClass("portitem")) { 
     cancelMouseOver = true; 
    } 
}); 

DEMO

Вы могли бы хотеть пересмотреть ли вы нужно явно это, хотя, возможно, более простой подход будет делать и то, что вам нужно.