Question

我决定在SVG中重新制作导航菜单。它实际上看起来有点像这个网站的导航，所以没什么可想象的。

我正在使用SVG绘制框，然后在其上放置文本，将它们都包含在链接中。通过将css类附加到框中，我可以设置：悬停attritbute，这样我就可以在用户将鼠标悬停在其上时更改背景颜色。问题是，当用户将鼠标悬停在文本上时，即使链接仍然有效，颜色更改也会反转。

如何让盒子改变颜色？

代码如下所示：

<svg width="640px" height="40px" 
 xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
</svg>

Answer 1

你的风格规则是什么样的？

以下内容应该可以正常工作：

<svg width="640px" height="40px" 
 xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
<g transform="translate(166 20) ">
  <a xlink:href="http://www.apple.com">
    <rect width="100" height="40" x="-50" y="-20" rx="5" class="svg_nav" />
    <text class= "nav_text" text-anchor="middle" dominant-baseline="mathematical">Home</text>
  </a>
</g>
<style>
    g:hover .svg_nav { fill: blue }
    g:hover .nav_text { fill: red }
    .svg_nav { fill: yellow }
    .nav_text { fill: black }
</style>
</svg>

将鼠标悬停在SVG链接上时始终如一地更改背景颜色

1 个答案: