jquery - 如何在将 jquery 与 css 一起使用后重置悬停功能

Question

这有点难以解释，所以看看:http://performasia.com/destinations/ .

我正在使用带有 css 悬停功能的 svg map ，我试图让底部的链接使国家/地区具有悬停效果。此外，我希望它能反过来工作，所以当你将鼠标悬停在国家/地区时，它也会更新链接(出于某种原因，这不起作用，有什么想法吗？)

但主要的问题是，当您将鼠标悬停在第一个中国链接上之后，它会阻止您看到鼠标悬停在它再次亮起的国家/地区的效果(是的，我知道，这是泰国，而不是中国)。

这是我正在使用的代码。每个国家都是一个多边形，将有自己的 id，以及每个 li 链接:

 <script>
    $('#list_china').hover(function(){
        $('#map_china').css('fill', 'red');
    ),function(){
        $('#map_china').css('fill', '#86888A');
    });                     
</script>   

Answer 1

您的 svg 中有 2 个 map_china 的定义。

删除第二个。

这可能是相关的，您没有关闭标签:

<polyline class="worldMapCountry" fill="#86888A" stroke="#6F7173" stroke-width="0.25" stroke-miterlimit="10" points="186.231,213.648 186.902,214.319