Hover Over One Element Shows Div, And Show Second Second Div While Hovering Over It

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

Solution 1:

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;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="liOffices"class="first"></div><divid="element"class="second"></div>