css - 转溢出:visible into a hover-menu?最简单的方法是什么

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