悬停的元素将从溢出溢出：隐藏的元素CSS

问题描述

我做了一个小提琴供参考：

I have made a fiddle for reference: http://jsfiddle.net/kLFn9/

突出显示有问题的隐藏。

，我正在使用：hover：after 来显示工具提示。但父元素上有溢出：隐藏。我该如何强制悬停的元素转义其父元素？

Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?

相关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 声明对父div的影响。请参阅：

Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden

您唯一可能的解决方法是使用javascript：首先获取跨度相对于文档的偏移，然后将其移至DOM中的另一个位置（即直接将子级移至正文），将其位置设置为绝对值，并使用您获取的偏移量来设置其left和top属性，这会将其定位在文档中的同一位置，但是现在它不包含在div中，因此不再需要遵循溢出：隐藏。

Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.

这篇关于悬停的元素将从溢出溢出：隐藏的元素CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！