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

我做了一把小提琴作为参考：

问题中的

溢出：隐藏

突出显示

基本上，我使用

：hover:after

来显示工具提示。但是父元素上有

溢出：hidden

。如何强制悬停的元素转义父元素

相关CSS：

div{
宽度：500px；
高度：200px；
背景：红色；
利润率：50像素；
溢出：隐藏；/*此规则*/
}
跨度：悬停：之后{
内容：attr（数据名）；
颜色：黑色；
位置：绝对位置；
顶部：-150px；；
左：0；
}

不幸的是，没有（简单的）方法允许子标记覆盖父div上的

溢出：隐藏

声明的影响。请参阅：

---

您唯一可能的方法是使用javascript：首先获取跨度相对于文档的偏移量，然后将其移动到DOM中的另一个位置（即将子对象直接移动到主体），将其位置设置为绝对，然后使用获取的偏移量设置其左属性和顶部属性，将其定位在文档中的同一位置，但是现在它不包含在div中，因此不再需要遵循

溢出：隐藏
我不确定您想要得到什么，但我重新创建了一个工具提示框架供您查看。它基本上是烟雾和镜子，我称之为：hover和与之相关的.class


希望这有帮助
 如果设置为
overflow:hidden，则无法使用纯CSS溢出父元素与子元素的边框。一个可能的CSS选项是使用一个同级元素，该元素具有
溢出：隐藏
设置并显示为弹出窗口。
您可以将孩子的位置设置为固定。
在某些情况下，您可以使用
div{position:absolute；}
转义
您可以使用
边距顶部
和
填充顶部

填充顶部
将扩展父区域，但负的
边距顶部
将使其保持在预期位置

看起来你正在逃离溢出，但事实上你没有


div{
宽度：500px；
高度：200px；
背景：红色；
利润率：50像素；
溢出：隐藏；/*此规则*/
背景剪辑：内容框；/*使用此选项可以约束内容框内的背景色，并且不绘制填充*/
顶部填充：200px；/*显示工具提示所需的空间*/
页边距顶部：-150px；/*200px-50px原始页边距*/
}
跨度{
背景：蓝色；
颜色：白色；
位置：相对位置；
顶部：100px；
显示：块；
宽度：100px；
保证金：自动；
}
跨度：悬停：之后{
内容：attr（数据名）；
颜色：黑色；
位置：绝对位置；
顶部：-150px；；
左：0；
}

悬停
我使用simplez-index强制元素悬停以转义父元素。请查收


div{
宽度：500px；
高度：200px；
背景：红色；
利润率：50像素；
溢出：隐藏；/*此规则*/
}
跨度{
背景：蓝色；
颜色：白色；
位置：相对位置；
顶部：100px；
显示：块；
宽度：100px；
保证金：自动；
}
跨度：悬停：之后{
内容：attr（数据名）；
颜色：黑色；
位置：固定；/*这里我将位置A替换为固定*/
top:10px；/*这里我将top-150px替换为10px*/
左：250px；/*这里我将位置左0替换为250px*/
z-index:99999；}/*在这里，我将新的z-index属性添加到99999*/

悬停
因为这是唯一一个似乎能理解我所问问题的答案，正确！“您不能将：before和：after标记与另一个：hover”是的，您可以！这是有效的CSS。要绕过溢出：隐藏，您可以欺骗它。。请参阅：如果您对“范围”也会弹出感到满意，那么可以这样做：当使用“右侧”和“左侧”进行滚动时，我的内容不会留在框中。但这至少在垂直方向起作用。