title: Elegant way to change CSS fill property whenever mouseover is triggered?
body: <p>I have several <code>svg</code> <code>polygon</code> elements that each visually is located on top of another <code>svg</code> <code>path</code> element. Sort of like a map divided by cities (path), and each city has an icon (polygon) on it. The polygon and path elements are grouped separately in HTML.</p>
  
  <p>And I want to 'fill' a path yellow whenever a <code>mouseover</code> event is triggered on the polygon that is visually on top of it.</p>
  
  <p>Here is what I have done using jQuery :</p>
  
  <pre><code>$('#polygon1').mouseover(function(){
      $('#path1').css('fill','#ffd03b');
  });
  
  $('#polygon1').mouseleave(function(){
      $('#path1').css('fill','#3A84C5');
  });
  </code></pre>
  
  <p>Since I have quite a few polygons and paths, the code would be quite long and repetitive.</p>
  
  <p>Is there a more efficient way of doing this?</p>