javascript - div 悬停无法正常工作

Question

当我悬停 div（一）时，我的 div 出现问题，但当我悬停弹出 div 时，他消失了，我需要在 div（一）之前滑动或弹出 div（二）而不是之后. 并且 div (one) 和 div(two) 属于同一个类。这是我的 CSS、HTML 和 javascript。

HTML

 <div id = "one" class="slideUP1"></div>
 <div id = "two" class="slideUP1"></div>

CSS

 .slideUP1

{
      background-color:Gray;
}

#one


{
    z-index:50;
    width:320px;
    height:124px;
    position:relative;
    overflow:hidden;
    float:left;
    margin-right:5px;
    margin-top:0px;
}

#two 
{ 
  display: none; 
  position:absolute;
  height:300px;
  width:900px; 
  z-index:55; 
  margin-bottom:0px;
}

javascript

$(document).ready(function () {

           $(".slideUP1").hover(function () {
               $(this).next("#two").animate({ opacity: "show", top: "144" }, "fast");
           });
       });

       $(document).ready(function () {

           $(".slideUP1").mouseleave(function () {
               $(this).next("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
       });

Answer 1

问题是当您将鼠标悬停在第二个 div 上时，您会离开第一个 div 从而使其关闭。将它们都放在一个容器中，并在其上使用悬停事件。

<div id = "container">
    <div id = "one" class="slideUP1"></div>
    <div id = "two" class="slideUP1"></div>
</div>

和javascript：

$(document).ready(function () {

       $("#container").hover(
            function () {
               $(this).find("#two").animate({ opacity: "show", top: "144" }, "fast");
           },
            function () {
               $(this).find("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
   });