Question

I have a problem with a div when I hover div (one) the div (two) pop up but when I hover the pop up div he disappears, I need to div(two) slide or pop up before div (one) not after. And div (one) and div(two) belog to the same class.
Here is my CSS, HTML and 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

The problem is that when you hover on the second div, you leave the first div hence making it close. Put both of them in a container and use the hover events on it instead.

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

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