JQuery 悬停在地图位置更改位置大小

Question

我正在网站上为当地的艺术小径制作地图。我们的平面设计师设计了一个出色的、非常独特的风格化地图（想想伦敦地铁地图），其中每个位置标记都是我们的标志。

每个徽标位置需要在悬停时更改大小，然后在单击时更改颜色 - 我可以想到一种使用区域标签更改颜色的方法，但我真的希望位置徽标图像在悬停时变大。

有什么想法吗？

Answer 1

考虑使用 svg 并为您的对象添加类，无需使用区域标签，您的图形将始终清晰。

第一次缩放：在这里您可以使用@odedya 评论中提到的纯 css3 解决方案：

.element:hover {
  transform: scale(20);
}

第二：点击时改变 svg 标记的颜色：

$('.marker').on("click", function() {
    $('#path').css({ fill: "#000000" });
});

还要考虑您需要支持的浏览器范围，如果低于 ie9 检查兼容性。 http://caniuse.com/#feat=svg。另请注意转换 - 也许您需要一些前缀。 http://caniuse.com/#search=transform。即使对于 ie9 和 safari，您也需要 ms- 和 -webkit 前缀。

还有一件事，如果你想保持事件的特定顺序，你可以用 js/jquery 更好地控制它，所以使用 mouseover 事件来获得想要的效果，然后允许点击。我不太了解动画变换比例，但您可以使用plugin。比尝试类似：

$('.marker').mouseenter(function() {
    $(this).animate({ transform: 1.2 });
}).click(function() {
    $('#path').css({ fill: '#333333' });
  });