RaggaMaffin
@RaggaMaffin

Как задать разные стили потомкам блока div?

есть два блока, у каждого из них два блока-потомка: текст и блок с надписью "Открыть", у них фоны разного цвета.
Мне нужно чтобы при наведении на общий блок, цвет фона менялся и у первого и у второго потомка сразу. Сейчас я добился только того, что при наведении на текст меняется цвет блока с текстом, а блок с кнопкой открыть не меняет цвет.
В общем мне нужно при :hover на общий блок менять цвета фонов одновременно у потомков этого блока.
5d3608ef38084770401969.png

структура html
<div class="financepage-main__items" onclick="location.href='index.html';" >
					<span class="item-text">Положение о подаче заявок на государственное субсидирование.docx</span>
					<div class="item-openfolder">
						<span class="item-open">Открыть</span>
						<i class="folder"></i>
					</div>
				</div>


вот код sass
&__items
			width: 100%
			height: 74px
			display: flex
			align-items: center
			justify-content: space-between
			background-color: #FFEDED
			border-radius: 37px
			padding-left: 45px
			color: #373737
			font-size: 18px
			margin-bottom: 10px
			cursor: pointer
			overflow: hidden
			box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2)
			&:hover 
				box-shadow: none
.item
	&-openfolder
		width: 195px
		display: flex
		align-items: center
		padding-left: 25px	
		background-image: url('../img/red-pixel.jpg')
		box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2)
		height: 100%
		color: #ffffff
		&:hover 
			box-shadow: none
  • Вопрос задан
  • 161 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
https://jsfiddle.net/futqLmn7/
.financepage-main__items:hover  .item-text{
  цвет 
}
.financepage-main__items:hover  .item-openfolder (или .item-open, смотря у кого начальный цвет задан){
  цвет 
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы