无论兄弟姐妹和侄子过滤器的溢出和不透明度如何，我如何在所有内容之上显示一个::after 元素

Question

所以我有一个元素，我想显示一个工具提示。 但是，当然，为了显示这个工具提示，我需要让它 go 高于一切，无论如何（包括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>

请告诉我如何解决这个问题。 我也对新的解决方案持开放态度，因为我知道这是实现此功能的一种方法。

Answer 1

您还需要将容器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>

Answer 2

解决此问题的一种方法可能是应用于::after伪元素，例如：

transform: translateY(-24px)

将工具提示提升到方格行上方，使其不会被该行中的下一个方格自动截断。

工作示例：

 .main { display: flex; width: 600px; margin-top: 24px; }.nephew { position: relative; width: 100px; height: 100px; background-color: rgb(0, 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>