«Наследовать» свойство от другого класса, назначенного тому же элементу? ⇐ Html

[Anonymous]

Я знаю, что «наследование» — неправильное слово, поскольку в CSS уже существует концепция наследования, — но я не был уверен, как это назвать.
Я хочу добиться перехода цвета фона элемента в другой цвет, а затем обратно к исходному независимо от исходного цвета. Например. если у меня есть 2 элемента, один из которых имеет красный фоновый цвет, а другой зеленый, наведение курсора мыши на любой из них переводит его в синий цвет, а затем после наведения мыши он возвращается к исходному соответствующему цвету. Вот что у меня на данный момент:

Код: Выделить всё

div {
width: 200px;
height: 200px;
}

.redSquare {
background-color: red;
}

.greenSquare {
background-color: green;
}
.changeBG {
background-color: ???;
transition: background-color 0.5s;
}
.changeBG:hover {
background-color: blue;
transition: background-color 0.5s;
}

Я выделил переход к другому классу, потому что хочу иметь возможность повторно использовать исходные имена классов без эффектов ввода/вывода мыши, и мне хотелось бы иметь возможность прикреплять классchangeBG к любому элементу.
Для цвета фона ChangeBG я пробовал наследовать, инициализировать и возвращать — все явно неправильно. Есть ли способ «передать» ему исходный цвет фона?
Очевидно, это невероятно упрощенная версия того, над чем я работаю. Реальные цвета не имеют значения

Подробнее здесь: https://stackoverflow.com/questions/798 ... me-element