Изменить два цвета при наведении курсора ⇐ CSS

[Гость]

У меня цвет #EF7A00 — состояние по умолчанию. Когда я навожу курсор на круг, его цвет должен измениться на #969089, но этот цвет появляется только при наведении курсора. В конце состояния наведения значок должен измениться на #EF7A00.

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

Для этого есть CSS.

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

  .malaysia-map-label circle {
fill: #EF7A00; /* Default fill color */
stroke: none; /* Specify no stroke by default */
transition: r 0.7s ease, fill 0.7s ease, stroke 0.7s ease; /* Add transition for radius, fill, and stroke */
}

.malaysia-map-label:hover circle {
r: 15; /* Change the radius to 15 when hovering */
stroke-width: 2; /* Set stroke width */
stroke: #FDF2E6; /* Set stroke color */
fill: #969089; /* Change fill color on hover */
}

Это js для изменения цвета при наведении курсора.

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

function increaseRadiusAndColor(element) {
var circle = element.querySelector('.malaysia-marker circle');
circle.setAttribute('r', 15);
circle.setAttribute('stroke-width', '2');
circle.setAttribute('stroke', '#FDF2E6');
// Setting a timeout to change the fill color back after the transition completes
setTimeout(function() {
circle.setAttribute('fill', '#EF7A00');
}, 700); // 700 milliseconds is the duration of the transition
}

function decreaseRadiusAndColor(element) {
var circle = element.querySelector('.malaysia-marker circle');
circle.setAttribute('r', 8);
circle.setAttribute('stroke', 'none');
}

Источник: https://stackoverflow.com/questions/781 ... transition