大佬教程收集整理的这篇文章主要介绍了无论兄弟姐妹和侄子的过滤器的溢出和不透明度如何，我如何在所有内容之上显示 ::after 元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
所以我有一个要显示工具提示的元素。但是当然，为了显示这个工具提示，我需要让它超越一切，无论如何（包括 overflow: hIDden 父母）。现在我正在使用 :hover::after 规则实现这一点，但该元素已隐藏在具有 BACkdrop-filter: blur(...) 样式的兄弟姐妹之下。
最小可重现示例：
.nephew {
BACkdrop-filter: blur(10pX);
BACkground-color: #0005;
wIDth: 100px;
height: 100px;
}
.nephew.tooltip {
position: relative;
}
.tooltip:hover::after {
content: 'This is a very long tooltip';
BACkground-color: white;
z-index: 999999999;
position: absolute;
wIDth: max-content;
}
.main {
display: flex;
}<div class="main">
<div class="nephew"></div>
<div class="nephew tooltip"></div>
<div class="nephew"></div>
</div>
请告诉我如何解决这个问题。我也乐于接受新的解决方案，因为我知道这是实现此功能的一种笨拙的方法。
您还需要将容器 div 向前移动，而不仅仅是伪元素。
包含这个 CSS，它现在应该可以正常工作了：
.nephew:hover {
z-index: 99999999;
}
更新示例：
.nephew {
BACkdrop-filter: blur(10pX);
BACkground-color: #0005;
width: 100px;
height: 100px;
}
.nephew:hover {
z-index: 99999999;
BACkground-color: #0004; /* just added this to highlight the container */
}
.nephew.tooltip {
position: relative;
}
.tooltip:hover::after {
content: 'This is a very long tooltip';
BACkground-color: white;
z-index: 999999999;
position: absolute;
width: max-content;
}
.main {
display: flex;
}<div class="main">
<div class="nephew"></div>
<div class="nephew tooltip"></div>
<div class="nephew"></div>
</div>,
解决这个问题的一种方法可能是应用到 ::after 伪元素，例如：
transform: translateY(-24pX)
将工具提示提升到方块行上方，使其不会被行中的下一个方块自动截断。
工作示例：
.main {
display: flex;
width: 600px;
margin-top: 24px;
}
.nephew {
position: relative;
width: 100px;
height: 100px;
BACkground-color: rgb(0,127);
}
.nephew.tooltip {
BACkground-color: rgb(63,63,127);
}
.nephew::after {
content: '';
position: absolute;
top: 0;
left: 0;
BACkground-color: white;
white-space: nowrap;
}
.nephew.tooltip:hover::after {
content: 'This is a very long tooltip';
transform: translateY(-20pX);
}<div class="main">
<div class="nephew tooltip"></div>
<div class="nephew"></div>
<div class="nephew tooltip"></div>
<div class="nephew"></div>
<div class="nephew tooltip"></div>
<div class="nephew"></div>
</div>以上是大佬教程为你收集整理的无论兄弟姐妹和侄子的过滤器的溢出和不透明度如何，我如何在所有内容之上显示 ::after 元素全部内容，希望文章能够帮你解决无论兄弟姐妹和侄子的过滤器的溢出和不透明度如何，我如何在所有内容之上显示 ::after 元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。