javascript - 将鼠标悬停在一个元素上显示 div，并将鼠标悬停在其上时显示第二个 div

Question

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

如果我将鼠标悬停在第一个 div 上，第二个 div 应该可见，并且在一定时间后它应该淡出(到目前为止一切顺利，我有这方面的代码)。

当显示第二个 div 时(2000 毫秒)，如果悬停，它不应消失。如果鼠标离开第二个 div，它就会消失。

在此示例中，当我将鼠标悬停在蓝色方 block 上时，会显示第二个方 block 。如果我将鼠标悬停在第一个，然后是第二个上，则绿色的应该可见，直到鼠标离开它(绿色的)。

你能帮我一下吗？

 $("#liOffices").hover(
   function() {
     $("#element").fadeIn(20, function() {
       $("#element").addClass("visible1");
       $("#element").removeClass("second");
     });


   }, function() {
     $("#element").fadeOut(2000, function() {
       $("#element").removeClass("visible1");
       $("#element").addClass("second");
     });
   }
 );

.first {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #36F;
}
.second {
  position: absolute;
  margin-left: 150px;
  width: 100px;
  height: 100px;
  background-color: #3C6;
  display: none;
}
.visible1 {
  position: absolute;
  margin-left: 150px;
  width: 100px;
  height: 100px;
  background-color: #3C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="liOffices" class="first"></div>



<div id="element" class="second"></div>

Answer 1

也尝试为#element绑定(bind)悬停事件。这将解决您面临的问题。并使用 .stop() 清除正在进行的动画队列。

 $("#liOffices,#element").hover(
   function() {
     $("#element").stop().fadeIn(20, function() {
       $("#element").addClass("visible1");
       $("#element").removeClass("second");
     });


   }, function() {
     $("#element").stop().fadeOut(2000, function() {
       $("#element").removeClass("visible1");
       $("#element").addClass("second");
     });
   }
 );

.first {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: #36F;
}
.second {
  position: absolute;
  margin-left: 150px;
  width: 100px;
  height: 100px;
  background-color: #3C6;
  display: none;
}
.visible1 {
  position: absolute;
  margin-left: 150px;
  width: 100px;
  height: 100px;
  background-color: #3C6;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="liOffices" class="first"></div>



<div id="element" class="second"></div>