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

不幸的是，没有（简单）方法允许子标记覆盖父div上的overflow:hidden声明的效果。请参阅：Allow specific tag to override overflow:hidden

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

Answer 2

要绕过overflow:hidden，您可以欺骗它..请参阅：https://stackoverflow.com/a/29687454/2165415

Answer 3

您可以使用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-events然后修复它们。

Answer 4

我不确定你想要做什么，但我重新创建了一个工具提示框架供你查看。它基本上是烟雾和镜子，我称之为：悬停和与之相关的.class。

http://jsfiddle.net/WE8Dw/

希望这会有所帮助。

Answer 5

如果将父元素边框设置为overflow:hidden;，则无法使用普通CSS溢出父元素边框。可能的CSS选项是使用兄弟元素来设置overflow:hidden;设置并将其显示为弹出窗口。

Answer 6

在某些情况下，您可以使用div{position: absolute;}

进行转义

Answer 7

我正在使用简单的 z-index 来迫使元素悬停以逃避父元素。请检查

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

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: fixed; /* Here I replaced position abosolute to fixed */
top: 10px;  /* Here I replaced top -150px  to 10px */
 left: 250px;  /* Here I replaced positionleft 0 to 250px */
 z-index:99999;} /* Here I added new z-index property to 99999 */

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

Answer 8

您可以将孩子的位置设置为固定。

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

8 个答案: