如何在hover时修改SVG填充色 解决X关闭按钮hover效果失效问题

问题原因及解决方案 #

核心原因排查

• 内联属性优先级问题：你在<path>标签上直接写了fill="red"内联属性，CSS类选择器的默认优先级低于内联属性，会导致hover状态的fill规则被覆盖无法生效。
• 元素遮挡问题：项目中如果存在其他元素的z-index高于该关闭按钮，或者按钮的父元素设置了overflow: hidden裁剪了按钮可交互区域，会导致hover事件无法被按钮捕获。
• 父元素事件屏蔽：如果按钮的任意父级元素设置了pointer-events: none，会导致子元素的所有交互事件被屏蔽，即使按钮本身配置了pointer-events: initial也无法触发交互。
• 动画状态未生效：你给按钮设置了2秒的渐入动画，动画结束前pointer-events: none会屏蔽所有交互，若你在动画结束前触发hover自然不会生效，同时要确认项目中没有其他样式覆盖了按钮的pointer-events属性。

修复步骤

1. 移除<path>标签上的fill="red"内联属性，将默认填充样式写到CSS中，保证hover规则可以正常覆盖默认样式：

/* 新增SVG路径默认填充样式 */
.exit .exitHover {
  fill: red;
}

/* 原有hover规则可保持不变，若项目存在其他高优先级样式覆盖，可加!important强制生效 */
.exit:hover .exitHover {
  fill: green;
}

2. 给关闭按钮添加足够高的层级，确保不被其他元素遮挡：

.exit {
  /* 在原有CSS规则基础上新增z-index配置，数值可根据项目实际层级调整 */
  z-index: 999;
}

3. 检查按钮所有父元素的pointer-events配置，确保没有设置为none，若有可给对应父元素添加pointer-events: auto配置放开事件限制。
4. 可添加测试规则快速定位问题：给.exit添加hover背景样式，如果hover时背景变色说明事件触发正常，是fill样式优先级问题；如果背景不变色则是元素遮挡或事件配置问题。

/* 测试用规则，排查完成后可删除 */
.exit:hover {
  background: #eee;
}

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