javascript - 在 z 轴上将图像夹在子对象和父对象之间

Question

现在我正在尝试设置一个带有隐藏图像的部分，该图像在悬停在 a 标签时显示。问题是这个隐藏图像应该垂直夹在子 a 标签和父 h2 标签之间。

我试图获得的行为的快速模型:mockup

下面是我现在的设置方式:

.about a {
pointer-events:auto;
}

.about-img {
pointer-events:none;

.about-img:hover {
background-image:url(about-image.jpeg);
background-size:36%;
background-repeat:no-repeat;
background-position:center center;

<section class="about-img">
    <h2>
      <a href="#">Hover Trigger</a>lorem ipsum.
    </h2>
</section>

只有当用户将鼠标悬停在 a 标签上时，这才能让我获得所需的图像行为。但我想不出办法让图像位于 a 标签下方，但位于 h2 中的其余文本之上。

afaik，你不能给背景图片一个 z-index。但我不知道还有什么办法可以让图像齐平地坐在中间，在 child a 标签下方，但也在父 h2 标签上方？

我试图避免为此使用 javascript，但我完全同意使用 js，如果它能让我得到我想要的行为。

感谢您提供的任何建议!

Answer 1

您可以尝试将图像的 z 索引设置为比文本的 z 索引高一个。然后，您必须将 anchor 标记的 z 索引设置为高于为图像选择的索引。

您需要使用实际的 img 标签而不是背景图片，并将其绝对定位在它们的通用容器中。