Держите показанный div открытым при зависании

Question

У меня есть ссылка, что при зависании она показывает другой div вне ссылки, когда я перемещаю мышь в недавно показанный div, мне нужно, чтобы она осталась. На данный момент, как только фокус отключается от ссылки, перемещаясь по показанному div, конечно, он исчезает.

Надо быть очень простой, конечно, вот что я имею в МО:

$('a.tel').hover(function() { 
    $('.phonePanel').fadeToggle().addClass('show'); 
}); 

Answer 1

Если я правильно понял ваш вопрос, это должно помочь ,

Fiddle: http://jsfiddle.net/3y6yjk3y/

var hoverTimeout, keepOpen = false, stayOpen = $('.stay-open'); 
$(document).on('mouseenter','.trigger',function(){ 
    clearTimeout(hoverTimeout); 
    stayOpen.addClass('show'); 
}).on('mouseleave','.trigger',function(){ 
    clearTimeout(hoverTimeout); 
    hoverTimeout = setTimeout(function(){ 
     if(!keepOpen){ 
      stayOpen.removeClass('show'); 
     } 
    },1000); 
}); 

$(document).on('mouseenter','.stay-open',function(){ 
    keepOpen = true; 
    setTimeout(function(){ 
     keepOpen = false; 
    },1500); 
}).on('mouseleave','.stay-open',function(){ 
    keepOpen = false; 
    stayOpen.removeClass('show'); 
}); 

Answer 2

Не совсем уверен, что вы ищете, но здесь есть некоторые быстрого кода, который показывает DIV и остается видимым, пока вы наведите указатель мыши на этот div и затем выйдите. Не был уверен, что вы делали с этим шоу-классом, поэтому я добавил его в примере, но на самом деле он ничего не делает в моем примере.

Я считаю, что ваша проблема заключается в том, что вы передали один обработчик и согласно документам jQuery, когда вы передаете один обработчик hover, он запускается при наведении и наведении.

https://api.jquery.com/hover/#hover-handlerInOut

Из документации:

Метод .hover(), при передаче одной функции, будет выполнять эту обработчик для обоих MouseEnter и MouseLeave события. Это позволяет пользователю использовать различные методы переключения jQuery в обработчике или по-разному реагировать на обработчик в зависимости от типа event.type.

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

Fiddle: http://jsfiddle.net/x4fo4zkk/

HTML:

<a id="show">show more</a> 
<div id="more">here is more</div> 

CSS:

div { 
    background: red; 
    height: 100px; 
    width: 100px; 
    display: none; 
} 

JS:

$('#show').hover(
    function() { 
     $('#more').fadeIn(); 
    } 
); 

$('#more').hover(
    function() { 
     $(this).addClass('show'); 
    }, 
    function() { 
     $(this).removeClass('show').fadeOut(); 
    } 
); 

Answer 3

Это может быть сделано исключительно с помощью CSS, если вы можете включить оболочку вокруг обоих элементов. Или, если он должен быть jQuery, оболочка все равно поможет.

HTML

<div class="phoneWrapper"> 
    <a class="tel">show more</a> 
    <div class="phonePanel">here is more</div> 
</div> 

CSS:

.phonePanel { display:none; } 
.phoneWrapper:hover .phonePanel { display:block } 

JQuery Альтернатива:

$('.phoneWrapper').on('mouseenter', function() { 
    $(this).children('.phonePanel').addClass('show'); 
}); 

$('.phoneWrapper').on('mouseleave', function() { 
    $(this).children('.phonePanel').removeClass('show'); 
}); 

скрипку здесь: http://jsfiddle.net/v3txspx9/