如何用CSS和JavaScript实现SVG悬浮效果？当前效果失效求助

核心问题分析 #

你的hover效果失效有两个关键原因：

1. 样式作用对象错误：你给外层.svg-button div设置了background-color hover样式，但SVG的<rect>元素完全覆盖了div，div的背景色变化根本看不到。
2. 样式优先级冲突：点击按钮时，JS通过setAttribute("fill", newColor)给<rect>添加了内联fill属性，内联属性的优先级远高于CSS规则，就算后续写了hover的fill样式也会被覆盖。

修复代码 #

1. 调整CSS：针对SVG元素设置hover样式，改用CSS变量控制基础颜色 #

/* CSS Styles for the button */
.svg-button {
  cursor: pointer;
}

/* 用CSS变量控制rect的填充色 */
#button-bg {
  fill: var(--button-color, blue);
  transition: fill 0.3s ease-in-out;
}

/* hover时修改rect的fill */
.svg-button:hover #button-bg {
  fill: purple;
}

/* Animation for the button color change */
@keyframes changeColorAnimation {
  0% { fill: blue; }
  50% { fill: green; }
  100% { fill: red; }
}

.change-color-animation {
  animation: changeColorAnimation 2s infinite;
}

2. 修改JS：通过CSS变量而非内联属性修改颜色 #

function changeColor() {
  const buttonBg = document.getElementById("button-bg");
  const newColor = getRandomColor();
  // 用CSS变量替换setAttribute
  buttonBg.style.setProperty('--button-color', newColor);

  // Remove the class and re-add it to trigger the animation again
  buttonBg.classList.remove("change-color-animation");
  void buttonBg.offsetWidth; // Force reflow
  buttonBg.classList.add("change-color-animation");
}

function getRandomColor() {
  const letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

3. HTML调整（确保引入CSS/JS文件） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>SVG Button</title>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div class="svg-button" onclick="changeColor()">
      <svg width="100" height="50" xmlns="http://www.w3.org/2000/svg">
        <rect id="button-bg" x="0" y="0" width="100" height="50" />
        <text x="25" y="30" fill="white">Click Me</text>
      </svg>
    </div>
    <script src="script.js"></script>
  </body>
</html>

修复说明 #

• 改用CSS变量--button-color控制<rect>的填充色，既保留了JS动态修改颜色的能力，又避免了内联属性覆盖CSS hover样式的问题。
• 将hover样式直接作用于<rect>元素，确保鼠标悬浮时能直观看到颜色变化。
• 完整保留原有点击动画逻辑，同时彻底解决hover失效问题。

内容的提问来源于stack exchange，提问作者Newton5000