什麼是最簡單的方法來溢出：可見到懸停菜單？

我想只使用CSS來把一個嵌套的div和一個普通的div變成頂部的一個可以在沒有移動所有佈局的情況下盤旋以查看更多內容的東西。什麼是最簡單的方法來溢出：可見到懸停菜單？

本質：

[懸停我要更多]

[內容是，被重疊，通過懸停內容]

或看到的jsfiddle近工作的例子：

http://jsfiddle.net/tchalvakspam/vVgY2/9/

不幸的是，當你做overflow:visible，這似乎是幾乎無用，因爲你不能給內容溢出任何背景風格，所以它仍然是不可讀的。

這是對的，沒有辦法給溢出：可見溢出內容的背景？如果這是令人悲傷的事態，那麼可以對該內容進行的最短的變化是什麼，以將其變成可讀的懸停擴展部分？

來源

2012-10-17 Kzqai

你可以做這樣的事情：http://jsfiddle.net/Shmiddty/vVgY2/12/但它可能不容易轉變成一個實際的佈局。 – Shmiddty

嗯，我很驚訝，但這幾乎奏效，我確定你應該在一個絕對元素的容器上粘貼「位置：相對」，以使它們正常工作。令人遺憾的是，由於絕對定位需要一個元素流出，所以當懸停發生時，它仍然會拋出所有其他佈局不合適。 http://jsfiddle.net/tchalvakspam/MBcDW/ – Kzqai

無法設置佔位符，因此除非我錯過了某些東西，否則絕對定位最終會導致移位佈局時產生不同的問題。 http://jsfiddle.net/tchalvakspam/MBcDW/ – Kzqai

終於在懸停的元素上找到了兄弟選擇器形式的解決方案，給出了懸停元素後的下一個元素的餘量，以取代現在絕對懸停元素。

http://jsfiddle.net/tchalvakspam/MBcDW/

所以相關的CSS變爲：

#fixed-height{ 
    position:relative;   
    width:100%; 
    height:1.25em; 
    overflow:hidden; 
    background-color:lightblue; 
    color:red; 
    z-index:10; 
} 
#fixed-height:hover{ 
    overflow:visible; 
    height:auto; 
    position:absolute; 
    max-width:20em; 
} 
#fixed-height:hover + #right-below{ 
    margin-top:1.25em; 
}

來源

2012-10-17 23:16:17 Kzqai

什麼是最簡單的方法來溢出：可見到懸停菜單？

回答

相關問題