Html 更改悬停时另一个元素的z索引

我有如下html：

<div class="projectThumb">
    <div class="textContainer">
        <h1>Header1</h1>
        <h2>&#9642 Header2a &#9642 Header2b &#9642</h2>
    </div>                  
    <a class="project1 video" href="https://player.vimeo.com/video/xxxxxx?transparent=0"><img src="Thumbnails/project1.png"></a>
</div>

.projectThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.projectThumb img:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
   filter: alpha(opacity=0.2);
   opacity: 0.2;
}

.projectThumb img:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
   filter: alpha(opacity=0.2);
   opacity: 0.2;
   z-index: -999;
}

当您将鼠标悬停在

中的

上时（它占据了整个

项目拇指

），显示文本的

不透明度降低，但图像仍然会在文本中流血，因为图像仍然位于文本上方。是否有办法更改其中一个元素的

z-index

，以避免其泄漏？我尝试将以下内容添加到CSS中：

.projectThumb a:hover {
    z-index: -999;
}

我还尝试将

z-index

添加到

.projectThumb img:hover

中，如下所示：

<div class="projectThumb">
    <div class="textContainer">
        <h1>Header1</h1>
        <h2>&#9642 Header2a &#9642 Header2b &#9642</h2>
    </div>                  
    <a class="project1 video" href="https://player.vimeo.com/video/xxxxxx?transparent=0"><img src="Thumbnails/project1.png"></a>
</div>

.projectThumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   -o-transition: all 0.3s ease-in-out;
   -ms-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}

.projectThumb img:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
   filter: alpha(opacity=0.2);
   opacity: 0.2;
}

.projectThumb img:hover {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0.2)";
   filter: alpha(opacity=0.2);
   opacity: 0.2;
   z-index: -999;
}

---

两者都不起作用。我可以通过设置

.textContainer h1、.textContainer h2、.textContainer h3的
z-index将文本带到前面，这确实会将文本带到前面，但我不知道如何在
projectThumb img:hover
上触发它，使其仅位于悬停图像的顶部。我还希望整个
保持可点击，即使是文本部分。当我使用
z-index
将文本带到前面时，文本区域不可单击，因为它位于
的顶部，不确定它是否位于CSS中的其他位置，但我看不到任何位置。
为了使z索引工作，您需要设置某种位置集

添加位置：相对于要应用z索引的任何类

.projectThumb a, .projectThumb img {
    position: relative;
}

如果您确实想使用
z-index
，可以使用变量：

:root {
    --thumbIndex: 0;
}

.projectThumb {
    z-index: var(--thumbIndex);
}

a:hover {
    --thumbIndex: -999;
}

我想，更好的办法是使用
显示
属性。
我认为这是我问题的一部分。我添加了
位置：相对
到
.projectThumb img
并添加
z-index:-999至
。项目拇指img:hover
。这导致悬停时闪烁。
容器
.projectThumb
背景为黄色，因此我尝试将
.projectThumb img:hover
设置为
z-index:-998和
项目拇指：悬停到
z-index:-999但这也不起作用。对我的问题有什么想法吗？