鼠标悬停时调整谷歌地图大小

Question

我希望在用户将鼠标悬停在地图的小版本上时调整 Google 地图的大小。问题是当我将鼠标悬停在地图导航元素时也会触发 mouseout 事件：

JS：

google.maps.event.addListener(map, 'mouseover', function() {
        $('#map_canvas').addClass('over',200);
});
google.maps.event.addListener(map, 'mouseout', function() {
        $('#map_canvas').removeClass('over',200);
});

HTML 元素只是一个简单的<div>

<div id="map_canvas"></div>

over 类只是为更大的视图添加了一些样式。它使用 jQuery UI 动画类更改来制作动画。

Answer 1

您是否尝试过将 mouseenter 和 mouseleave 绑定到地图的包含 div 并这样做而不是 mouseout/mouseover 作为地图对象上的事件侦听器？

$('#map').mouseenter(function() { 
/* add class */
 }).mouseleave(function() {
 /*remove class */ 
});