如果鼠标位于第一个或第二个div上，则保持第二个div可见 [英] Keep a second div visible if the mouse is over the first or second div

问题描述

有两个div; Div A（默认情况下 display：none ）和Div B（始终可见）。如果鼠标移过Div B，Div A就会变得可见，如何让它变成这样。如果鼠标光标在Div A或Div B上，Div A应该保持可见，否则Div A应该被隐藏。

我为此使用了jQuery插件hoverIntent。

  $（。the-dropdown）。hoverIntent（function（）{
 $（。the- （）; 
}，function（）{
 $（。the-dropdown）。hide（）; 
}）; 
 
 $（。menu-item）。hoverIntent（function（）{
 $（。the-dropdown）。show（）; 
}，function ）{
 $（。the-dropdown）。hide（）; 
}）; 
  

jsfiddle

解决方案

嗯，试试这样的事情。

HTML：

 < div id =a> ;< / DIV> 
< div id =b>< / div> 
  

CSS：

  div {
 height：200px; 
 width：200px; 
} 
 #a {
 background：＃0f0; 
 display：none; 
} 
 #b {
 background：＃f0f; 
 
  

JS：

<$ $（'＃a'）。$（'＃a，#b'）。hover（function（）{
$（'＃a'）。show（）;
}，function （）{
$（'＃a'）。hide（）;
}）;

小提琴

或者在您的特定情况下：

 <$ c （）。
 $（。the-dropdown）。show（）; 
}，function（） ）{
 $（。the-dropdown）。hide（）; 
}）; 
  

There are two divs; Div A (display:none by default) and Div B (visible all the time). How would one make it so if mouse moves over Div B, Div A becomes visible. Div A should remain visible if the mouse cursor is on either Div A or Div B, otherwise Div A should be hidden.

I'm using jQuery plugin hoverIntent for this.

$(".the-dropdown").hoverIntent( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

$(".menu-item").hoverIntent( function(){
    $(".the-dropdown").show();
}, function(){
    $(".the-dropdown").hide();
});

jsfiddle

解决方案

Hmm, try something like this.

HTML:

<div id="a"></div>
<div id="b"></div>

CSS:

div {
    height: 200px;
    width: 200px;
}
#a {
    background: #0f0;
    display: none;
}
#b {
    background: #f0f;
}

JS:

$('#a, #b').hover(function() {
    $('#a').show(); 
}, function() {
    $('#a').hide();    
});

Fiddle

Or in your specific case:

$(".the-dropdown, .menu-item").hover( function(){
        $(".the-dropdown").show();
    }, function(){
        $(".the-dropdown").hide();
});

这篇关于如果鼠标位于第一个或第二个div上，则保持第二个div可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！