时间戳

首页 > 解决方案 > 在 z 轴上将图像夹在孩子和父母之间

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

问题描述

现在，我正在尝试设置一个带有隐藏图像的部分，该图像在悬停 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。但我不知道如何让图像在中间齐平，在子标签下方但也在父 h2 标签上方？

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

感谢您提供的任何建议！

标签： javascripthtmlcssz-index

解决方案

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

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

推荐阅读