<div id="description">
  <h2>Зміна кольору при наведенні</h2>
  <p>Цей приклад демонструє зміну кольору елемента при наведенні курсору.</p>
</div>

<div id="result">
  <div class="box">Елемент</div>
</div>

:root {
  --main-color: #ff0000; /* Задаємо змінну з колором */
}

.box {
  width: 200px;
  height: 200px;
  background-color: var(--main-color); /* Використовуємо змінну */
  transition: background-color 0.3s ease;
}

.box:hover {
  --main-color: #00ff00; /* Змінюємо значення змінної при наведенні */
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.