在悬停时一一选择css中的所有孩子答案

【问题标题】：select all childs inside class in css one by one on hover在悬停时一一选择css中的所有孩子
【发布时间】：2020-06-26 10:57:44
【问题描述】：

我有一张带有州的国家地图，为简单起见，您可以在 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 被指针悬停。

【问题讨论】：

请添加您的 svg 内容以进行复制
svg 内容为 3500 行，因此无法附加。建议的解决方案对我不起作用解决方法是使用 jquery： $(document).ready(function(){ $('.states *').hover(function(){ $( this ).css("fill", "蓝色"); },function(){ $( this ).css("fill", "red"); }); });
svg 取自这里：es.wikipedia.org/wiki/Distritos_de_Costa_Rica#/media/… 并复制并粘贴到一个 html 文件中。
创建一个minimal reproducible example 例如将其限制为 2 个左右的状态并使用 rect 元素而不是路径。然后您就可以将其编辑到问题中。

【解决方案1】：

您需要像这样将悬停选择器应用于子级而不是父级：

.state *:hover {
   fill: blue;
}

通用示例：

.parent * {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.parent *:hover {
  background-color: red;
}

<div class="parent">
  <div>Div 1</div>
  <div>Div 2</div>
  <div>Div 3</div>
  <div>Div 4</div>
</div>

【讨论】：

这个答案对我不起作用。有趣的是，这改变了 22 状态的颜色：#path22 { fill: red;但这不是悬停：#path22:hover { fill: red; }

【解决方案2】：

试试这个代码

.state path:hover {
   fill: blue;  
}

【讨论】：