SVG，为什么：hover可以更改笔划宽度而不更改笔划颜色？

Question

为什么在此SVG中，我可以更改悬停时的笔触宽度，但不能更改笔触颜色吗？

下面的代码段中清楚地显示了该问题。

stroke-width:5;适用于<g id="HOVERME_LEGEND_ABC">中的所有元素，而stroke:blue;似乎不适用于任何元素。

MWE SNIPPET

#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>