Как сделать, чтобы цвет цены со скидкой изменялся вместе с остальным текстом при наведении?

Question

[Rodim]

Здравствуйте:
1. Есть блок с товарами (флекс-контейнер), с карточками, на некоторых карточках цена указана со скидкой. Карточки товаров представляют собой div'ы внутри флекс-контейнера. Стандартный цвет текста на карточках — черный.

2. Цена оформлена в виде span, расположенного внутри другого родительского div (вместе с ценой там справа ещё идёт кнопка добавления товара в корзину, их пришлось обернуть в отдельный блок). Стандартный цвет цены со скидкой — оранжевый.

3. Карточкам указан :hover с изменением background-color и цвета всего текста. Фон должен становиться оранжевым, текст — белым.

Проблема: цвет скидки не меняется с оранжевого на белый. Как можно пофиксить?

JSFiddle для наглядности: https://jsfiddle.net/fdojbkt8/

Comments

[Ankhena]

Почитайте про дочерние и контекстные селекторы htmlbook.ru/samcss/kontekstnye-selektory и т.д.
.flex-item:hover .discount {стили для discount при наведении на родителя}

p.s.
Вам за это еще никто ничего ласкового не сказал?

<div class="price">
<span class="Price">

Answer 1

[Дмитрий Перевозкин]

Если там задан цвет, можно попрбовать color: #цвет !important;

Answer 2

[smrostik]