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。还要注意转换 - 也许你需要一些前缀。 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' });
  });