Consistently change background colour upon hovering over an SVG link

Question

Hi,

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.

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?

The code looks like this:

<svg width="640px" height="40px" 
 xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"&gt;
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com"&gt;
    <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

What does 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"&gt;
<g transform="translate(60 20) ">
  <a xlink:href="http://www.apple.com"&gt;
    <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"&gt;
    <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>