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

Div悬停不能正常工作

1 个答案: