SVG：仅在矩形上悬停时需要边框而不是

中的文本我有一个矩形和其中的一些文本。整个矩形及其内的文字都是可点击的，点击后会打开一个新的网页。SVG：仅在矩形上悬停时需要边框而不是

我需要在我的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; 
 
     
 
    }

我看到包装盒上的边框以及文字时，我将鼠标移动到它。

这是有点棘手的解释，我知道。我希望我明确自己。

来源

2014-09-23 Nitin

很难从代码中知道它是不完整的（例如需要看到矩形），但我怀疑您需要的是使用rect元素而不是a元素。您目前设定时，笔触颜色上a，试试这个来代替：

rect:hover 
{ 
stroke:#26a9e0 
}

当然，这将是更好的我更具体的（这将影响到所有的矩形），所以你要使它一个特定的班级（说glow）和使用rect.glow，而不是只有rect。

来源

2014-09-23 20:46:31 OldGeeksGuide

SVG：仅在矩形上悬停时需要边框而不是

回答

相关问题