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

Question

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

如果我将鼠标悬停在第一个div上，第二个div应该是可见的，并且在一定时间之后它应该淡出（到目前为止很好，我有代码）。

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

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

你能帮帮我吗？

 $("#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的悬停事件。这将解决您面临的问题。并使用.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>