Почему не меняется стиль родительского блока при наведении?

Question

[Jake Taylor]

Есть тег <a> с текстом, в который вложен тег <span>.

Нужно, чтобы при наведении на блок <a> менялся цвет текста, который находится, непосредственно, в блоке <a> и цвет иконки, которая задается вот так <span class="icon icon-account">.

https://jsfiddle.net/5yht78pk/

Comments

[Ankhena]

Намек: и где у вас в коде что-нибудь вот для этого:

Нужно, чтобы при наведении на блок менялся цвет текста, который находится, непосредс...

Для второй части вижу.

Answer 1

[Jake Taylor]

Решил вопрос вот так:

a:hover {
    background-color: #E4E6E8;
    color: #3C4146;
}

a:hover span {
    color: #3C4146;
}

Только вопрос, почему не работает вот так:

a:hover span {
    background-color: #E4E6E8;
    color: #3C4146;
}

Comments

[MagnusDidNotBetray]

Только вопрос, почему не работает вот так:

Потому что это стили для спана, а не для ссылки, очевидно же.

[Jake Taylor]

a:hover span {
    background-color: #E4E6E8;
    color: #3C4146;
}

Рассмотрим данный код, который является неработоспособным.
По логике данной строки a:hover span должно выполняться условие: При наведенном курсоре на тег и вложенный должен меняться фон и цвет содержимо...

[Ankhena]

Jake Taylor, этот селектор a:hover span
применяется ко всем span, которые находятся внутри тегаa, когда на него наведена мышка.