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

Question

现在，我试图设置一个带有隐藏图像的部分，该图像会在将标签悬停在标签上时显示。问题在于此隐藏图像应垂直地夹在子标签和父标签之间。

我试图获得的行为的快速模型：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>

这可以使我获得期望的图像行为，只有当用户将鼠标悬停在标签上方时，该行为才可见。但是我想不出一种方法来将图像放置在标签下方，而将h2中的其余文本放置在[[顶部]]上。 afaik，您不能为背景图片设置z-index。但是我不知道如何使图像平齐地位于中间，在孩子下面的标签，但也在父h2标签上方？

我曾尝试避免为此使用JavaScript，但是我完全可以使用js，如果它可以使我得到所要的行为。

感谢您提供的任何建议！

现在，我试图设置一个带有隐藏图像的部分，该图像会在将标签悬停在标签上时显示。问题是此隐藏图像应垂直地夹在子标签和父标签之间...

Answer 1

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