Как с помощью CSS(hover) реализовать изменение background-color независимого блока?

Question

[BB 8]

CodePen

Как с помощью hover на кнопку(Buy Now), изменить цвет первого дочернего li-элемента ??

Конструкция

.plans_row_item a:hover li:first-child {
  background-color: #49cbcd;
}

не работает :\

Answer 1

[Андрей]

Если чутка вмешаться в разметку то вполне себе получится перекрашивать любой элемент списка.
https://codepen.io/m1roku/pen/QgZzaJ

Comments

[BB 8]

Магия какая-то. Насколько мне известно, символ "+" выбирает следующий сестринский элемент!

Каким образом работает Ваш вариант? :DDDD

[Андрей]

BB 8: это настоящее колдунство (=
Я ссылку по факту в разметке поместил перед списком, что дает мне возможность манипулировать с ним с помощью +
А располагается она внизу визуально с помощью свойства order которым можно тасовать элементы в flex контейнере что карты в колоде.

[BB 8]

Андрей: Блин! Я даже на разметку не обратил внимание. Теперь стало ясно) Это действительно гениально!
Спасибо огромное :)

Answer 2

[4X_Pro]

Думаю, без JavaScript тут не обойтись... А в JavaScript потребуется повесить обработчик на события onmouseover и onmouseout.

Comments

[BB 8]

Понял. Благодарю)