css - 什么是最简单的将溢出：可见到悬停菜单的方法？

Question

我正在尝试仅使用 css 将嵌套 div 和普通 div 转换为可以悬停在顶部的 div 以查看更多内容而无需移动所有布局的东西。

本质上：

[悬停我更多]

[内容被悬停内容重叠]

或查看 jsfiddle 上几乎可行的示例：

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

不幸的是，当你这样做时overflow:visible，它似乎几乎没有用，因为你不能给出溢出任何背景样式的内容，所以它仍然不可读。

是不是，没有办法给overflow:visible溢出内容一个背景？如果这是可悲的情况，那么可以对该内容进行的最短更改量是多少，以将其变成可读的悬停展开部分？

Answer 1

最终找到了解决方案，即悬停上的兄弟选择器，为悬停元素之后的下一个元素提供边距，以代替现在绝对悬停元素。

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;
}