在 z 轴上将图像夹在孩子和父母之间

Question

现在我正在尝试设置一个带有隐藏图像的部分，该图像在悬停 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.txt 中其余文本的顶部。

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

我试图避免为此使用 javascript，但我完全可以使用 js，如果它能让我得到我所追求的行为。

感谢您提供的任何建议！

Answer 1

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

您需要使用实际的 img 标签而不是背景图像，并将其绝对放置在它们的公共容器中。