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

Question

[Vitaly Max]

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


структура 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

Comments

[Lord_Dantes]

item:hover openfolder | styles

[Рома Зварич]

Выложите код на Codepen или JSFiddle, чтобы Вы сами могли увидеть, что результат не соответствует тому, что на картинке

[Vitaly Max]

Рома Зварич, https://codepen.io/vitmax1/pen/QejPxL?editors=1100

[Vitaly Max]

Рома Зварич, вот сейчас при наведении на красный блок тень сбрасывается у всего блока (общего) а если я навожу на левый блок с текстом, то у красного блока тень не сбрасывается.. мне нужно добиться синхронности

Answer 1

[Ankhena]

https://jsfiddle.net/futqLmn7/

.financepage-main__items:hover  .item-text{
  цвет 
}
.financepage-main__items:hover  .item-openfolder (или .item-open, смотря у кого начальный цвет задан){
  цвет 
}

Comments

[Vitaly Max]

спасибо, все получилось