Действия jQuery Mouseenter и mouseleave

Question

Я использую следующий скрипт jQuery:

$("#divid").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});
$("#hldiv").mouseenter(function() {
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);   
});

Как вы можете видеть, когда курсор мыши находится над гиперссылкой #hldiv, #divid должно быть показано. Основная цель - сохранить DIV отображается, если мышь находится над DIV - но #divid не должен быть виден изначально.

Если мышь перемещается по гиперссылке, DIV должен появиться, и когда мышь перемещается DIV, он должен оставаться, пока мышь не уйдет.

Проблема в том, что с моим текущим кодом, когда пользователь перемещается по гиперссылке, а затем - DIV отображается / исчезает правильно, но когда пользователь выходит из гиперссылки и над DIV сам по себе DIV также исчезает.

Как мне это исправить?

Answer 1

Почему бы вам не добавить контейнер и не сделать:

<div id='container'>
<a ID="hlDiv">hlink</a>
<div ID="divId">Test Test Test</div>
</div>

$(document).ready(function() {
    $("#hlDiv").hover(function() {
        $('#divId').show(1000);
    })
        $('#container').mouseleave(function(){
            $('#divId').hide(1000);
        });
});

скрипка здесь: http://jsfiddle.net/w68YX/8/

Answer 2

Если я правильно понял, переписать

$("#divid").mouseenter(function() {
    $('#divid').stop(true);
    $('#divid').show(1000);
}).mouseleave(function() {
    $('#divid').hide(1000);
});

Может помочь, так как он останавливает текущую анимацию (исчезает) и возвращает ее обратно (если она уже стала немного прозрачной).

Однако это зависит от вашего HTML и может не сработать в вашем случае, поэтому, пожалуйста, опубликуйте также структуру.

Answer 3

Я очень опоздал на эту вечеринку - но есть гораздо лучший способ сделать это, поэтому я хочу добавить его для будущих браузеров. Вам не нужен jQuery для этого эффекта вообще.

Во-первых, оберните два элемента в контейнере (здесь я использую div с классом container), и примените класс к элементу, который вы хотите отобразить / скрыть на месте (здесь я использую show-on-hover класс на #divId элемент)

<div class="container">
  <a id="hlDiv" href="...">link text</a>
  <div class="show-on-hover" id="divId">popup stuff</div>
</div>

Затем настройте свой CSS следующим образом:

.container > .show-on-hover { display: none; }
.container:hover > .show-on-hover { display: block; }

#divId { /* whatever styles you want */ }

Эффект заключается в том, что теперь курсор полностью контролируется CSS - но у него нет перехода 1s, который у вас был изначально. Это немного сложнее (и в настоящее время не работает в IE - но будет поддерживаться начиная с IE10).

Просто измените CSS следующим образом:

.container { position: relative; }
.container > .show-on-hover { opacity: 0.0; position: absolute; }
.container:hover > .show-on-hover { opacity: 1.0; }

.show-on-hover {
    -webkit-transition: opacity 1s; /* Chrome / Safari */
    -moz-transition: opacity 1s;    /* Firefox */
    -o-transition: opacity 1s;      /* Opera */
}

Относительное расположение на .container означает, что контейнер устанавливает свои собственные ограничивающие рамки для своих дочерних элементов и их расположения. Это означает, что когда вы затем установите > .show-on-hover укладка в position: absolute;, он все еще будет ограничен своим родителем (если вы установите left: 0; Например, он переместится к левому краю .container, а не экран).

opacity Переключение теперь просто заставляет абсолютно позиционированный элемент показываться / исчезать везде, где вы его поместили (и вы бы обновили CSS, чтобы разместить его именно там, где вы хотите, относительно гиперссылки). Потому что мы больше не используем display: none - DIV всегда будет занимать место на экране - даже когда скрыто (что, вероятно, не то, что вы хотите).

И наконец - последний блок, который устанавливает переходы, сообщает современным браузерам, что при изменении непрозрачности элементов класса .show-on-hover, сделайте так, чтобы это произошло как анимация в течение 1 с.

Вот jsFiddle, показывающий переходы: http://jsfiddle.net/TroyAlford/nHrXK/2

И вот jsFiddle, показывающий только переключение: http://jsfiddle.net/TroyAlford/nHrXK/3/