能否通过CSS在鼠标悬停container时一次性修改所有SVG路径颜色？

完全可以实现批量修改效果，推荐用CSS方案，简洁高效，不需要额外的JavaScript：

CSS 实现方案 #

假设你的HTML结构是包含.container容器和内部的SVG：

<div class="container">
  <svg>
    <path d="..." fill="#333" />
    <path d="..." fill="#333" />
    <!-- 其他路径元素 -->
  </svg>
</div>

添加以下CSS样式，就能在鼠标悬停.container时，一次性修改所有SVG路径的颜色：

/* 默认路径颜色 */
.container svg path {
  fill: #333;
  transition: fill 0.3s; /* 可选：添加颜色过渡动画 */
}

/* 容器悬停时，所有路径统一变色 */
.container:hover svg path {
  fill: #e74c3c; /* 替换为你需要的目标颜色 */
}

原理是利用CSS后代选择器，当.container触发hover状态时，选中其内部所有svg path元素，批量修改fill属性，无需逐个路径设置样式或事件。

JavaScript 实现方案（适合复杂交互场景） #

如果需要结合其他JS逻辑，也可以通过事件监听实现：

const container = document.querySelector('.container');
const svgPaths = container.querySelectorAll('svg path');

// 鼠标进入容器时修改颜色
container.addEventListener('mouseenter', () => {
  svgPaths.forEach(path => path.style.fill = '#e74c3c');
});

// 鼠标离开容器时恢复原颜色
container.addEventListener('mouseleave', () => {
  svgPaths.forEach(path => path.style.fill = '#333');
});

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