在懸停在SVG鏈接上時一致地更改背景顏色

我決定在SVG中重新制作導航菜單。它實際上看起來很像這個網站的導航，所以沒什麼可以想象的。在懸停在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>

來源

2009-10-25 RailFan

什麼是你的風格規則是什麼樣子？

像下面這樣的東西應該很好地工作：

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

來源

2009-10-25 11:10:11

在懸停在SVG鏈接上時一致地更改背景顏色

回答

相關問題