我的问题

Question

我试图改变SVG路径的颜色，同时强调href。

如果我悬停SVG路径，它会更改填充颜色。但是，我还想添加一个相应的href，如果它是悬停的，它应该加下划线，SVG路径应该改变填充颜色。

    <svg width="480" height="660" xmlns="http://www.w3.org/2000/svg">
 <metadata id="metadata31">image/svg+xml</metadata>
    <g>
      <title>Karta</title>
      <g id="g4436">
       <path fill="#C5EF6E" fill-rule="evenodd" stroke="#000000" stroke-width="0.1" stroke-linecap="square" stroke-miterlimit="4" id="Norrbotten" d="m396.27551,46.7125l-6.5,15.875l-5.625,5.0625l-3.43753"/>
       <path fill="#C5EF6E" fill-rule="evenodd" stroke="#000000" stroke-width="0.1" stroke-linecap="square" stroke-miterlimit="4" id="Lappland" d="m346.77551,10.15l-7.875,1.4375l3.81247,5.25l0.75003,5.0625l-1.375,6.0625l-2.3125"/>
    </g>
     </g>
    </svg>

风格

svg #Norrbotten:hover{
    fill: #408927;
}
svg #Lappland:hover{
    fill: #408927;
}

网址目前如下：

<a href="#" class="Norrbotten">Norrbotten</a>
<a href="#" class="Lappland">Lappland</a>

但是要走的路可能就是增加一堂课？用jQuery做到了吗？

我的问题

如何更改SVG路径的填充颜色，同时href被加下划线？

如果SVG路径被悬停，href如何加下划线？

Answer 1

我不知道是否可以在javascript中触发:hover。所以我没有这样做，而是添加了class。

<强> CSS

svg .Norrbotten:hover, svg .Norrbotten.hovered { fill: #408927; }
svg .Lappland:hover, svg .Lappland.hovered { fill: #408927; }

a { text-decoration: none; }
a:hover, a.hovered { text-decoration: underline; }

<强>的jQuery

$('.Norrbotten').hover(
  function() {
    $('.Norrbotten').addClass('hovered');
  }, function() {
    $('.Norrbotten').removeClass('hovered');
  }
);

$('.Lappland').hover(
  function() {
    $('.Lappland').addClass('hovered');
  }, function() {
    $('.Lappland').removeClass('hovered');
  }
);

JSFiddle

Answer 2

将SVG置于<a>内并执行a:hover .Norrbotten {fill:red;}

更改SVG路径的颜色，并加下划线href

我的问题

2 个答案: