При наведении на кнопку изменение цвета блока в котором находится эта кнопка
При наведении на кнопку (Read more), нужно чтоб менялся задний фон блока в котором кнопка находится, на скрине фон белый и менялся например в красный, можно ли это сделать с помощью css? кучу вариантов написания с hover использовал и ничего не нашел
html код:
<div class="s2_block">
<i class="fab fa-asymmetrik"></i>
<h3 class="s2_designTitle">Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
<button>Read more</button>`
</div>Ответы (1 шт):
Автор решения: ck1e
→ Ссылка
Только на css никак, нельзя обращаться к родителям после детей. Либо js подключать, либо сделать button в одной области видимости с .s2_block
.s2_block {
position: relative;
}
.s2_block:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: -1;
height: 100%;
opacity: 0;
background: red;
}
button:hover~.s2_block:before {
opacity: 1;
}<button>Read more</button>
<div class="s2_block">
<i class="fab fa-asymmetrik"></i>
<h3 class="s2_designTitle">Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut</p>
</div>