Question

我有一个SVG图像（缩短了snipp），我想在鼠标悬停时突出显示每个path。

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

但我无法弄清楚如何使用CSS。

当鼠标悬停在整个SVG上时，此snipp会使path ID：Lappland将颜色更改为#111。

svg:hover #Lappland{ 
  fill: #111;
}

如何使用CSS更改具有唯一ID的特定paths的颜色？

Answer 1

您正在使用将鼠标悬停在错误的元素上。将鼠标悬停在svg。

中的特定ID上

svg #Lappland:hover { 
  fill: #111;
}

将鼠标悬停在SVG图像CSS的特定区域

1 个答案: