Анимация наведения — смена цвета блока и текста при наведении

Анимация наведения — смена цвета блока и текста при наведении в Тильде

думай — делай — богатей

Простой CSS сниппет, для создания анимации смена цвета при наведении в зероблоке.

Установка:

Добавьте шейп и задайте ему класс shape
Добавьте текстовый элемент и задайте ему класс text
Скопируйте CSS код и добавьте его в T123
Отключите pointer-events у текста
Настройте свойства цвета
Наслаждайтесь =)

<!-- https://ilda.top/hoverchangecolor -->

<style>
.shape .tn-atom {
  background-color: #f95704 !important; /* Исходный цвет */
  transition: background-color 0.3s ease;
}

.shape, .text {
  transition: color 0.3s ease;
}

.shape:hover .tn-atom {
  background-color: #121A58 !important; /* Новый цвет при наведении */
}

.shape:hover + .text .tn-atom,
.shape:hover ~ .text .tn-atom {
  color: #fafafa !important; /* Цвет текста при наведении на .shape */
}
</style>