使用懸停的移動div

我需要這個代碼的小幫助。我正在嘗試創建一個菜單。我在jsFiddle 使用懸停的移動div

我的問題證明這是一個按鈕（這是不是一個真正的按鈕）繼續移動，因爲我在它懸停，有什麼方法可以用來保持它在哪裏？

下面是我的一些代碼

<div id="start_bar"> 
     <div id ="start_button"> 
    Test 

      <div id="nav"> 
      Hello World 
      </div> 

     </div> 
    </div>

和CSS

#start_button{ 
height:48px; 
width:48px; 
background-image:url('images/start.png'); 
color:white; 
} 
#start_button:hover { 
height:48px; 
width:48px; 
background-image:url('images/start.png'); 
margin-top: -18px; 
} 

#nav { 
    display: none; 
} 
#start_button:hover > #nav { 
display: block; 
width: 70px; 
height: 150px; 
margin-top: -150px; 
background-color: grey; 
}

來源

2013-01-13 LegendaryLaggy

而不是使用margin-top: -Xpx;到菜單進入的地方，使它絕對定位爲left: 0; bottom: 100%;。這將起作用，並且您不必爲菜單或菜單欄輸入像素高度。

Demo

一般情況下，要避免元素設置的高度。元素的高度應該儘可能地由內容決定。或者，在這種情況下，position: absolute; bottom: 100%;使元素向上100％相對座標系的高度... position: absolute;也從文檔流中釋放元素。菜單隨後可根據需要自由增加「更高」。

來源

2013-01-13 02:09:42 thirdender

擺脫你:hover僞選擇的：

#start_button:hover { 
    margin-top: -18px; /* This causes it to shift up */ 
}

不這樣做，它工作得很好： http://jsfiddle.net/qkGR4/3/

來源

2013-01-13 01:25:32 Blender

是的，但我想灰色框在黑線上，沒有「測試」在其中 – LegendaryLaggy

@ user1951751：我不確定你的意思。 – Blender

我想實現類似於我所展示的內容，但是我不希望灰色框超出黑色線條，如果這使得任何意義:) – LegendaryLaggy

取下#start_button:hover

來源

2013-01-13 01:25:56 jhansen

的margin-top屬性從#start_button:hover刪除屬性margin-top，增加#start_button:hover > #nav高度：

#start_button:hover { 
    height:48px; 
    width:48px; 
    background-image:url('images/start.png'); 
} 
#start_button:hover > #nav { 
    display: block; 
    width: 70px; 
    height: 131px; 
    margin-top: -150px; 
    background-color: grey; 
}

http://jsfiddle.net/qkGR4/5/

來源

2013-01-13 01:29:27

仍然不是我想要的，但更改此固定它'高度：130px;' – LegendaryLaggy

Ops 。我認爲你希望在徘徊時看到「測試」按鈕灰色。解決答案 –

使用懸停的移動div

回答

相關問題