15

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

7 回答 7

15

不幸的是，没有（简单的）方法可以让子标签覆盖overflow:hidden父 div 上的声明效果。请参阅：允许特定标签覆盖溢出：隐藏

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

于 2012-05-04T09:42:20.723 回答
8

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

于 2017-07-03T19:52:37.073 回答
2

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

于 2020-07-05T02:52:32.123 回答
0

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

http://jsfiddle.net/WE8Dw/

希望这可以帮助。

于 2012-05-04T09:51:17.580 回答
0

如果将其设置为overflow:hidden;. 可能的 CSS 选项是使用同级元素到已overflow:hidden;设置并将其显示为弹出窗口的元素。

于 2012-05-04T09:57:30.203 回答
0

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

于 2017-02-07T16:03:07.907 回答
-2

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

于 2013-11-07T14:13:18.743 回答