如何实现鼠标悬停g标签时，修改其内部所有元素的透明度？

嘿，这事儿很简单！你之前分别给path和text设置悬停透明度的方式没问题，但要实现鼠标悬停在<g>标签上时内部所有元素统一改变透明度，只需要把CSS选择器改成基于<g>的悬停状态来控制它的子元素就行。

根据你提供的SVG结构，你的<g>标签带有cu-node类，咱们可以利用这个类来精准定位，给出两种实现方式：

方式1：控制<g>内部所有子元素（最简洁） #

如果<g>里只有path和text，或者你希望所有子元素都同步变化，用这个写法：

g.cu-node:hover * {
  opacity: 0.8;
}

方式2：精准控制指定元素（更严谨） #

如果只想让path和text变化，避免影响其他可能存在的子元素，就明确指定元素类型：

g.cu-node:hover path,
g.cu-node:hover text {
  opacity: 0.8;
}

为什么这么写？ #

原来的path:hover和text:hover是元素自身被鼠标悬停时才触发样式，而改成g.cu-node:hover [子元素]后，是当鼠标悬停在整个<g>容器上时，容器内的目标元素就会应用透明度样式，完美实现你要的“统一改变”效果。

而且利用cu-node类可以避免影响页面上其他无关的<g>标签，精准度更高~

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