jQuery失去與位置懸停：相對

我設計了一個使用jQuery的下拉滑動菜單。當在一個頁面上我加jQuery失去與位置懸停：相對

position: relative 
top: -18px

一些div元素，他們對被向下滑動的UL的頂部。在菜單中移動鼠標時，當我與這些元素交叉時，jquery開始向上滑動菜單（似乎在移動ul時，我跳到頂部的div，所以這是正確的）。當然，我不想要這樣的效果。我嘗試添加z-index，但沒有運氣。

http://jsfiddle.net/2WHVT/（我在日期標記中添加了黑色邊框，這是破壞菜單）。對不起，顏色和設計，我很快就移動了，但重點是一樣的。

也許你有一些想法？

來源

2011-08-22 deha

您需要發佈更多的html/css和jQuery。也許你可以用http://jsfiddle.net做一個實例。 – tw16

你在這裏：http://jsfiddle.net/2WHVT/ – deha

您需要新增一個z-index才能將您的li排在首位。活生生的例子：http://jsfiddle.net/tw16/2WHVT/12/

#menu ul li { 
    border-right: 1px solid #820B0B; 
    display: block; 
    float: left; 
    list-style: none outside none; 
    margin: 0; 
    padding: 0; 
    position: relative; 
    z-index: 1; /*add this*/ 
}

來源

2011-08-22 22:45:46 tw16

是的，謝謝。我正在將z-index添加到整個菜單div中，但這不起作用......也許你可以告訴我爲什麼？ – deha

@deha：正如我在下面的答案之一的評論中解釋的那樣。沒有'position：absolute'，'position：relative'或'position：fixed'的元素'z-index'將不起作用。 – tw16

誰可以請你解釋爲什麼？此解決方案完美並且有效。 – tw16

我添加了一個z-index到#menu ul CSS，它似乎做的伎倆。像這樣：

#menu ul 
{ 
    padding: 0; 
    margin: 0; 
    z-index: 2; //THIS IS WHAT I ADDED 
}

在這裏看到：http://jsfiddle.net/nayish/2WHVT/10/

來源

2011-08-22 22:46:45 Nayish

這不起作用。如果你運行鼠標長達'li'的頂部，你會看到下拉沒有出現。這是因爲如果沒有'position：absolute'，'position：relative'或'position：fixed'，'z-index'將不起作用。 – tw16

適合我...看到jsfiddle，不需要猜測... – Nayish

我不是在猜測。使用Firefox 6和Chrome 13我已經測試過你的小提琴。它不起作用。 'li'的上半部分不會觸發下拉菜單。確保你有足夠的窗口，這樣'＃NewsDisplay'重疊菜單，而不是在它下面。 – tw16

#NewsDisplay .news .newsDate 
{ 
    position: relative; 
    top: -18px; 
    display: inline-block; 
    border: 1px solid black; 
    height: 18px; 
    width: 100%; 
    text-align: right; 
    color: Gray; 
    z-index:-10; 
}

這爲我工作。讓我知道你是否有問題。

來源

2011-08-22 22:47:07 BentOnCoding

嗯，不，跨度消失了（至少在歌劇中） – deha

jQuery失去與位置懸停：相對

回答

相關問題