Как наследовать цветовые свойства от фигур к figcaptions

Question

Я пытаюсь сделать фигуру, которая меняет цвет фона содержащегося изображения, когда я навожу на нее курсор мыши. Я смог сделать столько же, а затем попытался подняться на уровень выше, пытаясь изменить цвет подписи и фона с помощью класса, но когда я наводил курсор на изображение, он не работал полностью.

Что я пытался сделать, так это разместить класс с фоном и цветом текста на рисунке и подумал, что это просто заставит заголовок унаследовать цвет текста, но этого не произошло.

Я также попытался, в качестве альтернативы, дать заголовку собственное свойство при наведении курсора, и это работает, но не должным образом.

Видите ли, если я задаю фигуре цвет фона и цвет текста, тогда только фон меняет цвет, как показано ниже.

До наведения После наведения

Текст по-прежнему синий, и я написал, что он белый.

и когда я применяю код непосредственно к подписи, это происходит

Не наводить курсор на заголовок При наведении курсора на заголовок

Итак, как вы можете видеть, заголовок загорается только тогда, когда на нем находится курсор, но я хочу, чтобы он загорался, когда мой курсор находится над любой частью изображения, поэтому я действительно хочу знать, есть ли вообще способ сделать это, любая помощь будет действительно полезна.

Вот код, который я использовал для этого

      figcaption {
    color: #3a7cc4;
}

.change {
    box-shadow: 0px 0px 30px lightgray;
    transition: all 0.2s linear;
}

.change:hover{
    background-color: #3a7cc4;
    transition: all 0.2s linear;
    color: white;
}

И затем я изменил цвет подписи отдельно, чтобы он менял цвет

      figcaption:hover {
    color: white;
}

Редактировать-

Вот рабочий фрагмент кода:

Answer 1

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

Однако в CSS, указанном в вопросе, figcaption переопределяет любой унаследованный цвет, устанавливая его сам. Следовательно, он не меняется при наведении на фигуру.

Таким образом, этот фрагмент удаляет это и вместо этого помещает на рисунок голубоватый цвет. Затем это наследуется, когда нет зависания. При наведении наследуется настройка цвета как белого.

Примечание: если это элемент-предок, а не фигура, которая имеет класс изменения, селекторы CSS нужно будет изменить на .change figure