JQuery 将鼠标悬停在 map 位置上会更改位置大小

Question

我正在网站上为本地艺术之路制作 map 。我们的平面设计师设计了一张出色的、非常独特的程式化 map (想想伦敦地铁 map )，其中每个位置标记都是我们的 Logo 。

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

有什么想法吗？

Answer 1

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

第一次缩放:这里你可以使用纯 css3 解决方案，正如@odedya 在评论中提到的那样:

.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' });
  });