Не работает hover для div внутри родительского div, что делать?

Question

[nomadicguy]

Хочу, чтобы при наведении на главный div, менялся цвет для текста для всех элементов внутри этого div.
Но hover не работает - он меня цвет текста только для самого родителя. Я не понимаю, как это исправить.

<div class="block1">
    Lorem ipsum dolor sit amet.
    <div class="block2">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>

.block1{
    width: 500px;height: 500px;
    border: 3px solid black;
}
.block2{
    width: 250px;height: 250px;
    border: 3px solid blue;
    font-size: 20px;
    color: chocolate;
}

.block1:hover{
    color: green;
}

Answer 1

[Алексей Уколов]

Должно быть либо так:

.block1 {
    width: 500px;
    height: 500px;
    border: 3px solid black;
    color: chocolate;
}

.block2 {
    width: 250px;
    height: 250px;
    border: 3px solid blue;
    font-size: 20px;
}

.block1:hover {
    color: green;
}

Либо так:

.block1 {
    width: 500px;
    height: 500px;
    border: 3px solid black;
}

.block2 {
    width: 250px;
    height: 250px;
    border: 3px solid blue;
    font-size: 20px;
    color: chocolate;
}

.block1:hover .block2 {
    color: green;
}

В вашем варианте указание цвета в дочернем элементе имеет приоритет над указанием цвета для родителя при наведении.

Answer 2

[Anonymous Penguin]

.block1:hover {
    color: green;
}
.block1:hover * {
    color: green;
}

Comments

[nomadicguy]

Здравствуйте. А как сделать следующее: есть родительский div.block1, внутри него дочерний поменьше размером div.block2. У div.block2 цвет текста, допустим, будет синий. И вот я хочу, чтобы при наведении на родительский блок, цвет у дочернего менялся на желтый, но если я бы продолжал вести мышку и навелся на дочерний блок, он бы снова поменял цвет, например, на фиолетовый. Как такое сделать?

Я попробовал такую запись, но она не работает

.block1:hover * {
color: yellow;
}
.block2:hover{
color: purple;
}

[Anonymous Penguin]

nomadicguy, Почему не работает? Все прекрасно работает, цвет текста меняется... Может, у твоего экрана проблемы с цветопередачей, и просто не видно разницы? Разницы между синим и очень близким к нему фиолетовым.

<div class="block1">
  a
  <div class="block2">b</div>
</div>

.block1 {
  color: green;
}
.block2 {
  color: blue;
}
.block1:hover * {
  color: yellow;
}
.block2:hover{
  color: purple;
}