悬停过渡时更改两种颜色

Question

我的颜色#EF7A00是默认状态。当我将鼠标悬停在圆圈上时，颜色应更改为#969089，但该颜色仅在悬停过渡时出现。在悬停状态结束时，应更改为 #EF7A00。

<g filter="url(#filter2_d_4210_5478)" class="malaysia-map-label" onmouseover="increaseRadiusAndColor(this)" onmouseout="decreaseRadiusAndColor(this)">
      <circle opacity="0.75" cx="1026" cy="506" r="8" fill="#EF7A00" id="malaysia-marker" class="malaysia-marker"/>
  </g>

这是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');
}

Answer 1

您可以使用关键帧更改两种颜色，而无需等待悬停结束：

.malaysia-map-label:hover circle {
    .....
    animation: changeColor 1s ...;
}
@keyframes changeColor {
    from {
      fill: #EF7A00;
    }
    to {
      fill: #969089;
    }
}

您可以在 CSS 中搜索更多有关属性的信息：

animation

和

keyframe