Javascript 悬停在一个元素上显示div，悬停在该元素上时显示第二个div

我有一个带有悬停事件侦听器的div，当我将鼠标悬停在它上面时，它会在一个单独的div中显示一些图像。我想做的是：

如果我将鼠标悬停在第一个div上，第二个div应该是可见的，并且在一定时间后它应该会淡出（到目前为止还不错，我有这方面的代码）

当显示第二个div（2000毫秒）时，如果悬停，它不会褪色。如果鼠标离开第二个div，它应该会褪色

在本例中，当我将鼠标悬停在蓝色方块上时，第二个方块显示为show。如果我将鼠标悬停在第一个鼠标上，然后再悬停在第二个鼠标上，绿色的鼠标应该一直可见，直到鼠标离开（绿色的）

你能帮帮我吗

$（“#liOffices”）。悬停(
函数（）{
$（“#元素”）.fadeIn（20，函数（）{
$（“#元素”）.addClass（“visible1”）；
$（“#元素”）.removeClass（“第二”）；
});
}，函数（）{
$（“#元素”）.fadeOut（2000，function（）{
$（“#元素”）.removeClass（“visible1”）；
$（“#元素”）.addClass（“第二”）；
});
}
);
。首先{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：#36F；
}
.第二{
位置：绝对位置；
左边距：150像素；
宽度：100px；
高度：100px；
背景色：#3C6；
显示：无；
}
.可见1{
位置：绝对位置；
左边距：150像素；
宽度：100px；
高度：100px；
背景色：#3C6；
}
也尝试绑定
#元素的悬停事件。这将解决您面临的问题。并使用
.stop（）
清除正在进行的动画队列


$（“#liOffices，#element”）。悬停(
函数（）{
$（“#元素”）.stop（）.fadeIn（20，函数（）{
$（“#元素”）.addClass（“visible1”）；
$（“#元素”）.removeClass（“第二”）；
});
}，函数（）{
$（“#元素”）.stop（）.fadeOut（2000，function（））{
$（“#元素”）.removeClass（“visible1”）；
$（“#元素”）.addClass（“第二”）；
});
}
);
。首先{
位置：绝对位置；
宽度：100px；
高度：100px；
背景色：#36F；
}
.第二{
位置：绝对位置；
左边距：150像素；
宽度：100px；
高度：100px；
背景色：#3C6；
显示：无；
}
.可见1{
位置：绝对位置；
左边距：150像素；
宽度：100px；
高度：100px；
背景色：#3C6；
}
谢谢！！那正是我想要的！