悬停在一个元素上显示div，并在悬停时显示第二个div [英] Hover over one element shows div, and show second second div while hovering over it

问题描述

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

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

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

在本例中，当我将鼠标悬停在蓝色方块上时，第二个是show。如果我将鼠标悬停在第一个，然后是第二个，那么绿色的鼠标应该是可见的，直到鼠标不在其中（绿色）。

你能帮我吗？

.first {position：absolute;宽度：100px; height：100px; background-color：＃36F;}。second {position：absolute; margin-left：150px;宽度：100px; height：100px; background-color：＃3C6; display：none;}。visible1 {position：absolute; margin-left：150px;宽度：100px; height：100px; background-color：＃3C6;}

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =liOfficesclass =first> < / div>< div id =elementclass =second>< / div>

解决方案

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

-a =jsdata-hide =false>

$（ ＃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;宽度：100px; height：100px; background-color：＃36F;}。second {position：absolute; margin-left：150px;宽度：100px; height：100px; background-color：＃3C6; display：none;}。visible1 {position：absolute; margin-left：150px;宽度：100px; height：100px; background-color：＃3C6;}  

< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< div id =liOfficesclass =first> < / div>< div id =elementclass =second>< / div>

I have a div with a hover event listener, when I hover over it, it displays some image in a separate div. What I would like to do is:

If I hover over the first div, the second div should be visible and after certain time it should fade out (so far so good, I have the code for this).

While the second div is displayed (2000 ms), if hovered, it shouldn't fade. If mouse leaves the second div, it should fade.

In this example, when I hover over the blue square, the second one is show. If I hover over the first, and then the second one, the green one should be visible until mouse is out of it (green one).

Can you please help me?

 $("#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>

解决方案

Try to bind hover event for #element also. That will fix the issue that you are facing. And use .stop() to clear the on going animation queue.

 $("#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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！