转向溢出的最简单方法是什么:在悬停菜单中可见?

时间:2012-10-17 19:01:24

标签: css3 layout css

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

本质:

[hover me for more]

[内容即-被重叠逐悬停内容]

或者在jsfiddle上看到近乎工作的例子:

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

不幸的是,当你执行overflow:visible时,它似乎几乎无用,因为你无法提供溢出任何背景风格的内容,因此它仍然是不可读的。

是吗,没有办法给出溢出:可见溢出内容的背景?如果这是令人悲伤的事态,那么可以对该内容进行的最短更改量是什么,将其转换为可读的悬停扩展部分?

1 个答案:

答案 0 :(得分:0)

最后在悬停时以兄弟选择器的形式找到解决方案,为悬停元素后面的下一个元素提供一个边距来取代现在的绝对悬停元素。

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