Действия jQuery Mouseenter и mouseleave - PullRequest
Новая
       27

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

0 голосов
/ 18 июля 2011

Я использую следующий скрипт 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 также исчезает.

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

Ответы [ 3 ]

1 голос
/ 18 июля 2011

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

<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/

0 голосов
/ 07 марта 2013

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

Во-первых, оберните два элемента в контейнере (здесь я использую div с классом container), и примените класс к элементу, который вы хотите отобразить / исчезнуть в hove (здесь я использую 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/

0 голосов
/ 18 июля 2011

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

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

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

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

...