如何在鼠标悬停SVG的opacity-1n元素时显示opacity-1e元素

你的问题出在CSS选择器逻辑和规则顺序上，以下是具体分析和修复方案：

问题原因分析 #

你的两个<path>是同层级的兄弟元素（都在#Layer_1容器下），之前尝试的选择器要么逻辑错误，要么因规则顺序导致不生效：

• #opacity-1n:hover #opacity-1e：后代选择器，仅适用于#opacity-1e是#opacity-1n子元素的场景，不符合你的DOM结构。
• #opacity-1n:hover > #opacity-1e：子元素选择器，同样不匹配兄弟关系的元素。
• #opacity-1n:hover + #opacity-1e/#opacity-1n:hover ~ #opacity-1e：这两个兄弟选择器逻辑正确，但如果默认隐藏样式写在hover样式之后，会因CSS规则优先级相同，后面的规则覆盖前面的，导致hover效果失效。

修复方案 #

方案1：调整CSS规则顺序（最简单有效） #

把默认隐藏样式放在前面，hover触发的显示样式放在后面，确保hover规则覆盖默认规则：

/* 默认隐藏opacity-1e */
#opacity-1e {
  opacity: 0;
}

/* hover opacity-1n时，显示同层级的opacity-1e */
#opacity-1n:hover ~ #opacity-1e {
  opacity: 1;
}

由于两个<path>是相邻兄弟，也可以用相邻兄弟选择器+替代~，效果一致：

#opacity-1e {
  opacity: 0;
}

#opacity-1n:hover + #opacity-1e {
  opacity: 1;
}

方案2：提高hover选择器优先级（若顺序调整无效） #

如果受其他CSS规则干扰，可通过增加父元素选择器提升优先级：

#opacity-1e {
  opacity: 0;
}

#Layer_1 #opacity-1n:hover ~ #opacity-1e {
  opacity: 1;
}

额外注意事项 #

• 确保.st0类设置了fill颜色，否则即使opacity变为1，元素也可能无法显示。
• 若#opacity-1e在#opacity-1n之前，CSS无法直接实现联动，此时需要用JavaScript监听mouseover和mouseout事件控制opacity。

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