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>的{{1}}标签会触发一个JS插件，在页面中打开视频播放器。

我的CSS看起来像这样：

class="video"

当您将鼠标悬停在.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>以避免它渗透？我已经尝试将以下内容添加到CSS中：

z-index

我也尝试将.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; }的{{1}}来将文字放在前面，这会将文本放在前面，但我不知道如何在z-index上触发该文本，以便它只在悬停时的图像上方。我也希望整个.textContainer h1, .textContainer h2, .textContainer h3保持可点击状态，甚至是文本部分。当我使用projectThumb img:hover将文字带到前面时，文字区域无法点击，因为它位于<div>之上。

Answer 1

不确定它是否在CSS中的任何其他地方，但我没有看到任何定位。为了使z-indexing起作用，您需要设置某种位置。

添加位置：相对于您要将z-indexing应用于的任何类。

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

Answer 2

如果您真的想使用z-index，可以使用变量：

:root {
    --thumbIndex: 0;
}

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

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

我想你，更好的想法是使用display属性。

在悬停

2 个答案: