使用鼠标悬停的SVG图像映射 - 单击时使数据“粘住”？

Question

我使用this plugin创建了一张图片地图。

当您将鼠标悬停在状态上时，它会显示您悬停状态的名称。但是，如果单击某个状态，我希望其数据保持静态，直到您重新单击要释放的状态。我无法弄清楚如何做到这一点。

这是我目前所拥有的代码： 的 http://codepen.io/anon/pen/rOZeBB

我尝试{@ 1}}鼠标悬停点击，这有效，但我无法弄清楚当你重新点击状态时重新绑定它：

unbind

有没有办法同时使用鼠标悬停和点击功能？

Answer 1

尝试设置全局变量：

 var selectedMap = null;
 $('#map').usmap({
    mouseover: function(event, data) {
      if ( selectedMap == null ) {
          $('#selected-state > span').text(data.name);
      }
    },
    click: function(event, data) {
      $('#selected-state > span').text(data.name);
      selectedMap = data.name;
    }
  });

要在再次点击后“取消”，请使用this。