CODEWITHSUNDEEP
jqueryhtmlcss
Gaurav
Gaurav

Reputation: 341

Slider div position overlapping on another div

I want to slide a div with some text on hover with another div, and need to repeat it three to four times now when i hover mouse on first div area, the slider div comes right place, but if i hove mouse on second div, the slider div come on same position...

enter image description here

Really appreciate if some one please can fix this...

Here is demo
here is Jquery code:- 

$(document).ready(function () {
        $("#dvPanel1").hover(function () {
            $("#downPanel1").stop(false, true).slideDown(100);
        });
        $("#dvPanel1").mouseleave(function () {
            $("#downPanel1").stop(false, true).slideUp(100);
        });
    });
    $(document).ready(function () {
        $("#dvPanel2").hover(function (event) {
            $("#downPane2").stop(false, true).slideDown(300);

        });
        $("#dvPanel2").mouseleave(function (event) {
            $("#downPane2").stop(false, true).slideUp(300);

        });
    });

Upvotes: 0

Views: 1392

Answers (3)

Vond Ritz
Vond Ritz

Reputation: 2012

This is my modified version might help you

http://jsfiddle.net/vonDy2791/9TAYn/4/

#downPane2 {
    display:none;
    float:left;
    width:765px;
    position:absolute;
    background-color: Aqua;
    top:360px;
    height:175px;
    margin-left:0px;
    z-index:100
}

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362300

You need to make the '#downPanel..' position:relative, instead of 'absolute'. Then set top:0px so that the display under the image (the 0px is relative to the image above the panel).

http://jsfiddle.net/skelly/9TAYn/3/

I also updated the fiddle so that you don't have multple $(document).onReady(..

Upvotes: 0

liyakat
liyakat

Reputation: 11853

please add in margin top to second panel like below

 <div id="downPane2" style="margin-top:189px;">

let me know if i can help you more.

Upvotes: 0

Related Questions