title: Hover a specific area of an SVG image CSS
body: <p>I have a SVG image (the snipp is shortened) and i want to highlight each <code>path</code> when they are mouse hovered.</p>
  
  <pre><code>    &lt;svg width="480" height="660" xmlns="http://www.w3.org/2000/svg"&gt;
   &lt;metadata id="metadata31"&gt;image/svg+xml&lt;/metadata&gt;
      &lt;g&gt;
        &lt;title&gt;Karta&lt;/title&gt;
        &lt;g id="g4436"&gt;
         &lt;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"/&gt;
         &lt;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"/&gt;
      &lt;/g&gt;
       &lt;/g&gt;
      &lt;/svg&gt;
  </code></pre>
  
  <p>But i can't figure out how to do this with CSS.</p>
  
  <p>This snipp makes <code>path</code> ID:<code>Lappland</code> change color to <code>#111</code> when the mouse is over the whole SVG.</p>
  
  <pre><code>svg:hover #Lappland{ 
    fill: #111;
  }
  </code></pre>
  
  <p>How can i change color of the specific <code>paths</code> with unique ID with CSS?</p>