悬停的元素从溢出中溢出：隐藏元素 css答案

【问题标题】：Hovered element to overflow out from an overflow:hidden element css悬停的元素从溢出中溢出：隐藏元素 css
【发布时间】：2012-05-04 09:33:33
【问题描述】：

我做了一个小提琴供参考：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;   
}

【问题讨论】：

绕过overflow:hidden，你可以欺骗它..见：stackoverflow.com/a/29687454/2165415
如果您对 span 也弹出没问题，可以这样做：jsfiddle.net/h27a77j7

标签： css

【解决方案1】：

不幸的是，没有（简单的）方法可以让子标签覆盖父 div 上的 overflow:hidden 声明的效果。见：Allow specific tag to override overflow:hidden

您唯一可能的办法是使用 javascript：首先获取 span 相对于文档的偏移量，然后将其移动到 DOM 中的另一个位置（即直接子元素到正文），将其位置设置为绝对位置，并使用偏移量你抓住设置它的 left 和 top 属性，将它定位在文档中的相同位置，但现在它不包含在 div 中，因此不再需要遵守overflow:hidden。

【讨论】：

因为这是唯一一个似乎理解我所问内容的答案，所以正确！

【解决方案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-events 修复它们。

【讨论】：

当与左右滚动一起使用时，我的内容没有留在框中。但这至少垂直工作。

【解决方案3】：

我正在使用简单的 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>

【讨论】：

这适用于fixed 定位，但不适用于absolute

【解决方案4】：

如果设置为overflow:hidden;，则无法使用纯 CSS 来溢出父元素与子元素的边框。可能的 CSS 选项是使用同级元素到设置了 overflow:hidden; 的元素，并将其显示为弹出窗口。

【讨论】：

【解决方案5】：

我不确定您想了解什么，但我重新创建了一个工具提示框架供您查看。我称之为 :hover 和与之关联的 .class 基本上就是烟雾和镜子。

http://jsfiddle.net/WE8Dw/

希望这会有所帮助。

【讨论】：

"你不能将 :before 和 :after 标签与另一个 :hover 配对" 是的，你可以！这是有效的 CSS。

【解决方案6】：

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

【讨论】：

【解决方案7】：

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

【讨论】：