试图在悬停时添加图像覆盖，但它返回图像下方的背景，并且图像保持在顶部。如何修复此
<div class="slider-inner pop parentSlider-cell content_overlay">
<?php echo wp_get_attachment_image($img['image'], 'carousel-image', '', ['class' => 'img-responsive myImg', 'data-track-content' => '']); ?>
</div>
.content_overlay{
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
&:hover{
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999;
}
}
为什么它不起作用？
问题是覆盖没有覆盖img有什么问题。
基本问题是img位于用作覆盖的div内，因此当悬停时增加覆盖z索引时，整个批次在z访问上"向前移动"，因此它们在该轴上的相对位置不会改变。
如果我们将img从覆盖中分离出来，并确保覆盖在img上，那么悬停就可以了。
这里有一个简单的例子，维护问题中给出的所有CSS，但将overlay元素与containing元素分离。显然，在实际版本中，php取代了img元素。img和overlay被赋予了绝对位置，所以它们位于同一位置。
<!DOCTYPE html>
<html>
<head>
<style>
.content_overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #FFF;
rbackground-color:transparent;
}
.content_overlay:hover{/* taken out the & and written as pure CSS rather than SCSS/SASS */
display: block;
background: rgba(0, 0, 0, .6);
color: #1f8dd6;
z-index: 999; /* kept this but not strictly necessary */
}
</style>
</head>
<body>
<div <div class="slider-inner pop parentSlider-cell" style="width: 100px; height: 100px; position: relative;"> <!-- given style just for this demo -->
<img src="" style="width:100%;height:100%;background-color:blue;position:absolute;"/> <!-- using a blue square img element just for this demo -->
<div class="content_overlay"></div>
</div>
</body>
</html>您可以用这样的覆盖来隐藏图像：
.container {
position: relative;
width: 220px;
height: 220px;
background-color: gray;
}
#image, #overlay {
position: absolute;
width: 200px;
height: 200px;
top: 10px;
left: 10px;
}
#image {
background-image: url('https://www.licg.nl/media/1287/duitse-dog740x433.jpg');
background-size: cover;
background-position: center;
z-index: 1;
}
#overlay {
visibility: hidden;
background-color: red;
z-index: 2;
}
.container:hover #overlay {
visibility: visible;
}<div class="container">
<div id="image"></div>
<div id="overlay">This image is now hidden</div>
</div>我不确定我是否正确理解了这个问题，但如果你想在悬停时隐藏/显示图像，它会是这样的：
<div class="content_overlay">
hover to show image
<img src="https://placeimg.com/640/480/any" />
</div>
.content_overlay img {
display: none;
}
.content_overlay:hover img {
display: block;
}