SVG：只需要在矩形上悬停边框而不是其中的文本答案

【问题标题】：SVG: Need border on hover only on the rectangle and not the text withinSVG：只需要在矩形上悬停边框而不是其中的文本
【发布时间】：2014-11-18 03:15:44
【问题描述】：

我有一个矩形和一些文本。整个矩形和其中的文本都是可点击的，点击后会打开一个新的网页。

我需要在我的 SVG 文档中使用样式，这样当我将鼠标移到文本或矩形上时，它应该在矩形周围显示一个边框。因为框中的所有内容都是可点击的，所以<path> 和<text> 元素位于<a> 元素中。所以，如果做这样的事情，我会在路径和文本周围得到一个边框。

<style type="text/css">
  <![CDATA[
    a:hover
    {
    stroke:#26a9e0
    }
  ]]>
</style>

即使鼠标移到路径或文本上，我如何才能在框周围获得边框？

编辑：这是对最初由 OP 作为答案发布的原始问题的编辑

感谢您的回复。为了清楚起见，在此处添加更多代码

<a aria-labeledby="itemTitle" cursor="pointer" xlink:href="http://some-link" target="_blank">
   
       <path id="path3856" fill-rule="evenodd" fill="#26a9e0" d="m808.52,167.06,0,58.146,3.7936,0,0-58.146-3.7936,0z"/>

       <path id="path3858" fill-rule="evenodd" fill="#FFF" d="m811.83,167.06,0,58.146,172.16,0,0-58.146-172.16,0z"/>

       <text id="text3860" style="text-anchor:start;text-align:start;" font-weight="normal" xml:space="preserve" font-size="17.65748024px" font-style="normal" y="191.36598" x="822.92633" font-family="Segoe UI" fill="#000000">Some Text</text>

</a>

所以，你可以看到我有其中包括和。我需要的效果是在盒子周围有一个边框，在代码中表示。重要的是边框应该在将鼠标移到形状和文本上时都显示出来。所以，如果按照你的建议做，只有当鼠标在矩形上时，我才会得到矩形的边框。如果我将它移到矩形中的文本上，边框就会消失。

要解决这个问题，如果我这样做了

a:hover
    {
      stroke:#26a9e0;
      
    }

当我将鼠标移到框上时，我看到了框上的边框和文本。

这有点难以解释，我知道。我希望我能说清楚。

【问题讨论】：

标签： css svg hover

【解决方案1】：

很难从您的代码中分辨出来，因为它不完整（例如，需要查看矩形），但我怀疑您需要使用 rect 元素而不是 a 元素。目前您在a 上设置描边颜色，请尝试以下操作：

rect:hover
{
stroke:#26a9e0
}

当然，对我来说更具体会更好（这会影响所有矩形），因此您希望将其设为特定类（例如glow）并使用rect.glow 而不仅仅是rect。

【讨论】：