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

Question

所以我有一个元素，我想为其显示工具提示。但是当然，为了显示这个工具提示，我需要让它超越一切，无论如何（包括 overflow: hidden parents）。现在我正在使用 :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>

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

How do I show an ::after element above everything regardless of overflow and opacities of filters of siblings and nephews

html

css

z-index

css-filters