Question

What i want to create is something like this. When hover there should be a slide down with info (like in the example when mouseover an img). What i have is this. The problem is that when the pointer is over an child element (<a>or <p>) the info box is bouncing up and down.

the html:

  <ul>
   <li>
   <div id="box_1" class="prevw_box">
     <div id="box_1-rep" class=" box-rep text1"><h3>CONDUCTIVE GRID TAPE</h3>
    <p class="p1">A lot of text ......a lot of text</p>

     <a class="see_product" href="#"></a>

     </div>

    </div>
   </li>

  </ul>

the css:

    .box-rep {
     position:absolute;
     top:-220px;
     left:0;
     width:238px;
     height:440px;
     background-color:#887455; }

   .prevw_box {
      position:relative;
      float:left;
      width:238px;
      height:220px;
      overflow:hidden;} 

and of course the jQuery code is:

  $('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseover(function(){
    $(this).stop().animate(
        {top:"0px",opacity:"0.8"},{duration:250})
        //$(this).stop()
    })

.mouseout(function(){
    $(this).animate(
        {top:"-220px",opacity:"0.0"},{duration:250})
})

I struggled to resolve the problem for the past days but i can’t take it anymore.
I need the idea, the alternative solution.

Thank you for the fast answers! I was so frustrated lately because of this. There was so many variants that i tried and i redone the code over and over again. The problem is solved! Thanks again!

Answer 1

Try mouseenter and mouseleave instead of mouseover, mouseout.

$('.box-rep')
.css({top:"-220px",opacity:"0.0"})
.mouseenter(function(){
$(this).stop().animate(
    {top:"0px",opacity:"0.8"},{duration:250})
    //$(this).stop()
})

.mouseleave(function(){
$(this).animate(
    {top:"-220px",opacity:"0.0"},{duration:250})
})