悬浮元素从溢出溢出:隐藏元素css

Question

我做了一个小提琴供参考:http://jsfiddle.net/kLFn9/

该overflow:hidden问题被突出显示.

基本上,我:hover:after用来显示工具提示.但是父元素就overflow: hidden在它上面.我如何强制悬停的元素逃脱父元素？

相关CSS:

div {
    width:500px;
    height:200px;
    background:red;   
    margin: 50px;
    overflow: hidden; /* this rule */
}

span:hover:after {
    content: attr(data-name); 
    color: black;
    position: absolute;
    top: -150px;;
    left: 0;   
}

Answer 1

不幸的是,没有(简单)方法允许子标记覆盖overflow:hidden父div上的声明效果.请参阅:允许特定标记覆盖溢出:隐藏

你唯一可能的办法是使用javascript:首先抓住相对于文档的跨度偏移量,然后将其移动到DOM中的另一个位置(即将子项直接转换为正文),将其位置设置为绝对值,并使用您抓取的偏移量设置其左侧和顶部属性,将其定位在文档中的相同位置,但现在它不包含在div中,因此不再需要遵守overflow:hidden.

Answer 2

您可以使用margin-top和padding-top。

padding-top将扩展您的父区域，但负数margin-top会将其保持在预期位置。

看起来你正在逃避溢出，但实际上你没有。

div {
    width:500px;
    height:200px;
    background:red;
    margin: 50px;
    overflow: hidden; /* this rule */

    background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
    padding-top: 200px; /* space required to display the tooltip */
    margin-top: -150px; /*200px - 50px of the original margin*/
}
    
span {
 background: blue;
 color: white;
 position: relative;
 top:100px;  
 display:block;   
 width: 100px;  
 margin: auto;    
}
    
span:hover:after {
    content: attr(data-name); 
    color: black;
    position: absolute;
    top: -150px;;
    left: 0;   
}

<div>
<span data-name="here">hover</span>
</div>

这可能会引入指针事件问题，但您可以使用pointer-eventsthen修复它们。