title: How to reset hover function after using jquery with css
body: <p>It's kind of hard to explain, so have a look: <a href="http://performasia.com/destinations/" rel="nofollow">http://performasia.com/destinations/</a>.</p>
  
  <p>I'm using an svg map with css hover functions, and I'm trying to have the links at bottom cause the countries to have their hover effect. Also, I'd ideally like it to work vice-versa, so when you hover on the country, it updates the links too (for some reason this isn't working, any ideas?)</p>
  
  <p>The primary problem though, is after you hover over the first china link, it prevents you from seeing the hover effect over the country it lights up again (yes, I know, it's Thailand, not China). </p>
  
  <p>Here's the code I'm using. Each country is a polygon and will have its own id, as well as each li link:</p>
  
  <pre><code> &lt;script&gt;
      $('#list_china').hover(function(){
          $('#map_china').css('fill', 'red');
      ),function(){
          $('#map_china').css('fill', '#86888A');
      });                     
  &lt;/script&gt;   
  </code></pre>