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

Question

我有这样的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>

单击带有

<a>

的

class="video"

标签会触发 JS 插件，该插件会在页面内打开视频播放器。

我的 CSS 看起来像这样：

.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;
}

当您将鼠标悬停在

<img>

内的

<a>

（占据整个

projectThumb

）时，

<img>

不透明度会降低，显示出文本，但图像仍然会渗透到文本中，因为图像仍在顶部它的。有没有办法改变其中一个元素的

z-index

以避免它渗透？我尝试将以下内容添加到 CSS 中：

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

我也尝试过将

z-index

添加到

.projectThumb img:hover

，如下所示：

.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

的

.textContainer h1, .textContainer h2, .textContainer h3

将文本置于前面，这确实会将文本置于前面，但我不知道如何在

projectThumb img:hover

上触发它，以便它仅位于悬停时的图像。我还希望整个

<div>

保持可点击，甚至文本部分。当我使用

z-index

将文本置于前面时，文本区域不可单击，因为它位于

<a>

的顶部。

Answer 1

不确定它是否在 CSS 中的其他位置，但我没有看到任何定位。 为了使 z 索引工作，您需要设置某种位置。

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

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

Answer 2

另一种方法是更改 html 文档中

div

和

a

元素的顺序，这实际上会改变渲染顺序。

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