悬停在一个元素上显示 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>

悬停在一个元素上显示 div，悬停在其上时显示第二秒 div

Hover over one element shows div, and show second second div while hovering over it

html

javascript

css

jquery

hover