Переключение между двумя цветами при наведении/выведении курсора мыши ⇐ CSS

[Anonymous]

• У меня есть цвет #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 ... ver-in-out