1

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

我正在使用带有 css 悬停功能的 svg 地图，并且我试图让底部的链接使国家/地区产生悬停效果。另外，我希望它反之亦然，所以当您将鼠标悬停在该国家/地区时，它也会更新链接（由于某种原因这不起作用，有什么想法吗？）

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

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

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

3 回答 3

0

map_china您的 svg 中有 2 个定义。

删除第二个。

这可能是相关的，你没有关闭标签：

<polyline class="worldMapCountry" fill="#86888A" stroke="#6F7173" stroke-width="0.25" stroke-miterlimit="10" points="186.231,213.648 186.902,214.319
于 2013-05-02T20:01:41.053 回答
0

阅读 KingKongFrog 所说的，不要忘记在准备好的文档上绑定听众。

<script>
$(document).ready(function(){
    $('#list_china').hover(function(){
        $('#map_china').css('fill', 'red');
    ),function(){
        $('#map_china').css('fill', '#86888A');
    });
});
</script>
于 2013-05-02T20:08:09.980 回答
0

我不确定您为什么不为此使用css。

<style>
  #list_china:hover #map_china { background-color: red; }
  #map_china:hover #list_china { background-color: red; }
  #map_china:hover { background-color: red; }
  #list_china:hover { background-color: red; }
</style>

如果我了解问题中要问的是什么，这应该可以

于 2013-05-03T01:58:43.397 回答