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

Question

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

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

有什么想法吗？

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. Also note on transform - maybe you need some prefixes. http://caniuse.com/#search=transform。即使对于 ie9 和 safari，您也需要 ms- 和 -webkit 前缀。

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

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

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

JQuery hover over map location changes location size

html

css

maps

jquery