Почему не работает :hover?

Question

[Евгений Петров]

Почему-то не срабатывает. Вроде раньше как-то реализовывал, сейчас походу руки затупились...

При наведении на один блок должен меняться стиль другого блока.
Наведение на блок родитель, изменение в дочернем блоке.

CSS:

#div1 .div2{
	width: 34%;
	height: 300px;
	margin-left: 1%;
	display: inline-block;
	cursor: pointer;
}
#div1 .div2 .div3{
	width: 100%;
	height: 50px;
	border-radius: 8px 8px 0px 0px;
	background: #313440;
	text-align: center;
	line-height: 50px;
	color: #fff;
}


/*Magic:*/
#div1 .div2:hover #div1 .div2 .div3{
	background: red;
}

HTML:

<div id="div1">
	<div class="content">
		<div class="div2" >
			<div class="div3">TEXT</div>
			<img src="image.png">
		</div>
	</div>
</div>

Answer 1

[Froggyweb]

#div1 .div2:hover #div1 .div2 .div3
Как перевести эту строку?
Магии нет, есть мошенничество
в блоке #div1 нет вложенного #div1 кроме того ид может быть только один на странице....

#div1 .div2 так писать не надо
#div1 .div2 .div3 - за это нужно отстреливать
#div1 .div2:hover #div1 .div2 .div3 это.....

Comments

[Exploding]

так писать не надо, ... отстреливать

Вы имеете ввиду имена id и классов?

[Froggyweb]

Exploding, я имею ввиду специфичность селекторов, мало того что читать эти полотенца тегов так себе удовольствие

[Евгений Петров]

Froggyweb, В смысле?
Т.е., код должен выглядеть так?

Блок-родитель:hover дочерний-блок{

}

[Froggyweb]

Евгений Петров, Блок-родитель:hover дочерний-блок{\

Это максимум

Answer 2

[Exploding]

/*Magic:*/
#div1 .div2:hover .div3{
  background: red;
}