<分区>
<分区>
我的 CSS 有问题，我不明白为什么我无法为我的叠加元素 (.afterDim) 创建过渡效果。我的叠加层正在运行，但是我找不到如何在两种状态之间进行转换。我试着玩我的类(class)，但似乎没有任何效果，我有点迷茫，我需要你的帮助。
.dimImgContainer .afterDim {
position: absolute;
top: 0;
left:10px;
width:calc(100% - 20px);
height: 100%;
display: none;
color: #FFF;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.dimImgContainer:hover > .afterDim {
display: block;
background: rgba(0, 0, 0, .6);
}<div class="hidden-xs col-sm-4 col-md-4 iqitcontent-column iqitcontent-element iqitcontent-element-id-12 banner-column ">
<a href="https://biospera.com/graines-potageres/"><div class="dimImgContainer">
<div class="afterDim">Hello there</div>
<img src="https://biospera.com/img/cms/Homepage/hp-banners/pct/graines-potageres-banner-pct-2.jpg" class="img-responsive banner-image" alt="Grievous">
<h2 class="headingDevDimPCT">General Kenobi</h2>
</div></a>
</div>我在这里也用完全相同的代码制作了一个codepen:
最佳答案
Display 属性为 ON 或 OFF，不能与转换一起使用。而是使用可以具有一系列值的属性，例如 Opacity。
.image-container .afterDim {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0; /* CHANGE DISPLAY to OPACITY */
color: #FFF;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.image-container:hover .afterDim {
opacity: 1; /* CHANGE DISPLAY to OPACITY */
background: rgba(0, 0, 0, .6);
}
关于html - CSS，悬停一个元素，通过过渡影响另一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48875684/