2013-05-08 211 views
0

我想滑動div與一些文本懸停與另一個div,並需要重複它三到四次現在當我將鼠標懸停在第一個div區域,滑塊div來對的地方,但如果我在第二個div繩拉鼠標,滑塊DIV來上相同的位置...滑塊div位置重疊在另一個div

enter image description here

很感激,如果有人請可以解決這個問題...

這裏是demo
這裏是jQuery代碼: -

$(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); 

     }); 
    }); 
+0

按'TidyUp' jsFiddle上的按鈕不會導致陽痿;) – 2013-05-08 09:13:22

回答

0

請在距頂部添加到第二面板像下面

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

讓我知道如果我能幫助你。

0

您需要製作'#downPanel ..'position:relative,而不是'絕對'。然後設置top:0px,這樣圖像下面的顯示(0px是相對於面板上方的圖像)。

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

我也更新了小提琴,讓你不必multple $(document).onReady(..

+0

謝謝,但我不想移動底部div down,滑塊div應該在底部div上重疊。那就是爲什麼我使用了「絕對」的位置...... – Gaurav 2013-05-08 09:00:53

2

做,這是我的修改後的版本可能會幫助你

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 
}