css - SVG，为什么可以:hover change the stroke-width but not the stroke-color?

Question

为什么在这个 SVG 中，我可以在悬停时更改描边宽度，但不能更改描边颜色？

问题在下面的代码片段中清楚地呈现出来。

stroke-width:5;正在查看应用于 <g id="HOVERME_LEGEND_ABC"> 中的所有元素, 而 stroke:blue;似乎只是不适用于任何。

MWE 片段

#LEGEND_ABC{
  cursor:pointer;
}
#LEFTTICKBOX_ABC{
  stroke:black;
}
#COLOUREDBOX_ABC{
  fill:yellow;
  stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="500"
  height="70"
  viewBox="-15 -45 500 70">

<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
  x="0"
  y="0"
  width="15"
  height="15">
</rect>
<use id="COLOUREDBOX_ABC"
  x="30"
  y="-5"
  xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
  x="65"
  y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
  width="42.5"
  height="95">
</rect>
<rect id="LEGENDBOX"
  x="0"
  y="0"
  width="25"
  height="25">
</rect>
</defs>
</svg>

我想要的是<g id="HOVERME_LEGEND_ABC">的全部内容悬停在组上时被抚摸成蓝色，不管单个对象在悬停在组上之前 的笔触颜色是什么。

Answer 1

更具体... #HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC

#LEGEND_ABC{
  cursor:pointer;
}
#LEFTTICKBOX_ABC{
  stroke:black;
}
#COLOUREDBOX_ABC{
  fill:yellow;
  stroke:black;
}
#HOVERME_LEGEND_ABC:hover{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #COLOUREDBOX_ABC{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}
#HOVERME_LEGEND_ABC:hover #LEFTTICKBOX_ABC{
  fill:#0000EE;
  stroke-width:5;
  stroke:blue;
}

<svg id="SVG"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="500"
  height="70"
  viewBox="-15 -45 500 70">

<g id="LEGEND_ABC">
<g id="HOVERME_LEGEND_ABC">
<rect id="LEFTTICKBOX_ABC"
  x="0"
  y="0"
  width="15"
  height="15">
</rect>
<use id="COLOUREDBOX_ABC"
  x="30"
  y="-5"
  xlink:href="#LEGENDBOX">
</use>
<text id="TEXT_ABC"
  x="65"
  y="12.5">
Color me (why are the rectangles not being stroked blue?)
</text>
</g>
</g>
<defs id="DEFINITIONS">
<rect id="RECTANGLE_YELLOW"
  width="42.5"
  height="95">
</rect>
<rect id="LEGENDBOX"
  x="0"
  y="0"
  width="25"
  height="25">
</rect>
</defs>
</svg>