Javascript 如何在悬停的div2上显示div1，在鼠标悬停的时候显示淡入淡出的div1？

我想在鼠标悬停时显示div1，只有在鼠标未同时悬停div1和div2时，才显示div1，并消失div1

我尝试使用以下CSS和jquery。但是div1在解除div2之后立即消失，我无法访问div1的内容

$（文档）.ready（函数（）{
$（'.about'）。悬停(
函数（）{
$（'.showsection'）.slideDown（800）.addClass（'show'）；
}
，函数（）{
$（'showsection'）。滑动切换（800）；
});
});
.showsection{
显示：无；
}
.表演{
显示：块；
}

关于
标题
CSS
：hover
属性将仅控制分配给它的元素，在您的示例中，可能是div1。因此，您必须使用JavaScript

使用JavaScript将
mouseenter
和
mouseleave
事件附加到div1。在这些事件侦听器函数中，控制希望div2执行的操作

基本上就是这样做的。
CSS
：hover
属性将只控制分配给它的元素，在您的例子中，可能是div1。因此，您必须使用JavaScript

使用JavaScript将
mouseenter
和
mouseleave
事件附加到div1。在这些事件侦听器函数中，控制希望div2执行的操作

基本上就是这样做的。
这可以通过将
mouseenter
和
mouseleave
事件附加到要显示/隐藏的元素来完成

这些是要求：


当鼠标进入关于时，显示
showsection
。这可以使用
about
上的
mouseenter
当鼠标未同时悬停在
showsection
和
about
上时，隐藏
showsection
。这实际上意味着要检查两件事：鼠标离开
showsection
时没有悬停
about
，鼠标离开
showsection
时没有悬停
about
。这意味着我们必须将
mouseleave
事件同时附加到
showsection
和
about

下面的代码片段应该会有所帮助


//JS
$（文档）.ready（函数（）{
//鼠标进入。关于
$（'.about'）.on（'mouseenter'，function（）{
$（'.showsection'）。向下滑动（800）；
});
//老鼠离开了。关于
$（'.about'）.on（'mouseleave'，function（）{
//如果鼠标未悬停在上方，请将其隐藏
如果（！$（'.showsection'）。是（':hover'））{
$（'showsection'）。滑动切换（800）；
}
});
//老鼠叶子。展示部分
（'mouseleave'，function（）{
//如果鼠标未悬停在.about hide.showsection上
如果（！$（'.about'）。是（':hover'））{
$（'showsection'）。滑动切换（800）；
}
});
});
/*CSS*/
.展示区{
显示：无；
背景：ddd；
}
h1{边距：0；}
.关于{背景：#eee；}

关于
标题
这可以通过将
mouseenter
和
mouseleave
事件附加到要显示/隐藏的元素来完成

这些是要求：


当鼠标进入关于时，显示
showsection
。这可以使用
about
上的
mouseenter
当鼠标未同时悬停在
showsection
和
about
上时，隐藏
showsection
。这实际上意味着要检查两件事：鼠标离开
showsection
时没有悬停
about
，鼠标离开
showsection
时没有悬停
about
。这意味着我们必须将
mouseleave
事件同时附加到
showsection
和
about

下面的代码片段应该会有所帮助


//JS
$（文档）.ready（函数（）{
//鼠标进入。关于
$（'.about'）.on（'mouseenter'，function（）{
$（'.showsection'）。向下滑动（800）；
});
//老鼠离开了。关于
$（'.about'）.on（'mouseleave'，function（）{
//如果鼠标未悬停在上方，请将其隐藏
如果（！$（'.showsection'）。是（':hover'））{
$（'showsection'）。滑动切换（800）；
}
});
//老鼠叶子。展示部分
（'mouseleave'，function（）{
//如果鼠标未悬停在.about hide.showsection上
如果（！$（'.about'）。是（':hover'））{
$（'showsection'）。滑动切换（800）；
}
});
});
/*CSS*/
.展示区{
显示：无；
背景：ddd；
}
h1{边距：0；}
.关于{背景：#eee；}

关于
标题
。悬停时。关于部分，然后转到。显示部分。该部分向下切换，向上切换，然后再次向下切换，然后粘住。当我在这里运行代码段时也会发生这种情况。请尝试使用.fadeIn和.fadeOut而不是.slideToggleIt，这很有帮助。悬停时。关于部分，然后转到。显示部分。该部分向下切换，向上切换，然后再次向下切换，然后粘住。我在这里运行代码段时也会发生这种情况。请尝试使用.fadeIn和.fadeOut而不是.slideToggle