保持在懸停時顯示div打開

Question

我有一個鏈接，當它展開時，它顯示鏈接之外的另一個div，當我將鼠標移動到新顯示的div時，我需要它保持。目前只要焦點脫離鏈接，移動顯示的div就會消失。

一定是在肯定很簡單，這裏是我在莫：

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

Answer 1

如果我理解正確你的問題，這應該幫助。

小提琴：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和鼠標離開事件。這允許 用戶在處理程序中使用jQuery的各種切換方法，或者根據event.type在處理程序中以不同方式響應。

在我的示例中，您可以看到給出一個或兩個處理程序的示例。

小提琴：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/