在 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 標簽而不是背景圖像，並將其絕對放置在它們的公共容器中。