将鼠标悬停在 SVG 链接上时始终更改背景颜色 [英] Consistently change background colour upon hovering over an SVG link

问题描述

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

I decided to play around re-making a nav menu in SVG. It looks quite a bit like this site's nav actually, so nothing much to imagine.

我正在用 SVG 绘制框，然后在它们上面放置文本，将它们都包含在一个链接中.通过将 css 类附加到框，我可以设置一个 :hover 属性，这样当用户悬停在它上面时我可以更改背景颜色.问题是，当用户将鼠标悬停在文本上时，颜色变化会反转，即使链接仍然有效.

I'm drawing boxes with SVG and then placing text over them, enclosing them both in a link. By attaching a css class to the box, I can set a :hover attritbute, so I can change the background colour when the user hovers over it. The problem is, when the user hovers over the text the color change is reversed, even though the link still works.

我怎样才能让盒子也改变颜色?

How can I make the box change colour as well?

代码如下:

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

推荐答案

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

What do your style rules look like?

类似以下内容应该可以正常工作:

Something like the following should work fine:

<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 链接上时始终更改背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！