Не работает :hover в верстке
возникла проблема с работой :hover. Никак не могу разобраться. Прикладываю кусок кода. Hover должен сработать следующим образом, при наведении на .plate-exh у элемента с классом .noActive прозрачность должна изменится на 1.
<div class="plate-exh">
<a class="exh-poster-wrap" href="starwars-expo.html">
<div class="poster-container">
<div class="poster">
<img src="img/sw-png_Active.png" alt="Герої зоряних війн" class="noActive" title="Герої зоряних війн">
<img src="img/sw-png_noActive.png" alt="Герої зоряних війн" class="active" title="Герої зоряних війн">
</div>
</div>
</a>
<div class="exh-info-wrap">
<div class="info-wrap">
<h2 class="city">Кременчук</h2>
<h3 class="date">27.05-13.06</h3>
<h3 class="location">ТРЦ "AQUA"</h3>
</div>
</div>
<div class="btn-wrap">
<button class="btn">
<a href="poster-sw.html">афіша виставки</a>
</button>
</div>
</div>
.plate-exh{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
.exh-poster-wrap{
margin-bottom: 25px;
.poster-container{
.poster{
width: 400px;
height: 475px;
overflow: hidden;
position: relative;
.noActive{
opacity: 0;
position: absolute;
width: 100%;
z-index: 2;
@include anim-set;
}
.active{
position: absolute;
width: 100%;
z-index: 3;
@include anim-set;
}
}
}
}
}
/* */
.plate-exh:hover .noActive{
opacity: 1;
}
body .body-wrap .content-wrap .exh-var-wrap .plate-exh .exh-poster-wrap .poster-container .poster .noActive {
opacity: 0;
position: absolute;
width: 90%;
z-index: 2;
transition: .3s;
transition-delay: .1s;
-webkit-animation-timing-function: ease;
animation-timing-function: ease; }
body .body-wrap .content-wrap .exh-var-wrap .plate-exh:hover .noActive {
opacity: 1; }