javascript - 在悬停时一一选择css中的所有孩子

Question

我有一张带有州的国家地图，为简单起见，您可以在 SVG 图像中想象美国的 51 个州。全部为红色。每个路径（状态）都有一个 html id 标签，并且都在一个带有 class="states" 的 div 内

<svg>
<states class="states">
   <path id="path1"> ... <path>
   .....
   <path id="path51"> ... <path>
</states>
</svg>

我想改变悬停状态的颜色。

.state:hover * {
   fill: blue;  
}

但问题是所有状态都会改变颜色，而不是只有 onw 被指针悬停。

标签： javascripthtmlcsssvg

Answer 1

试试这个代码

.state path:hover {
   fill: blue;  
}

检查这支笔：https ://codepen.io/am-77/pen/LYpgNze