javascript - 谷歌地图 MarkerWithLabel CSS 悬停效果故障

Question

我正在使用 MarkerWithLabel，这样我就可以使用 div 创建 Google map 标记，以获得有效的 CSS 动画等。

几个月前，在 CSS 中使用 :hover 的功能最近被添加到 MarkerWithLabel 库中，但该事件仅在标记的一部分上注册，如您在此 codepen 中所见。 .

CSS
#container:hover { // Works but glitches
   opacity: 1.0;
}

JS
var marker = new MarkerWithLabel({
  position: myMap.getCenter(),
  map: myMap,
  opacity: 0.0,
  labelContent: "<div id=container>" +
  " <div id=largeDiv" +
    (a lot of code)
  "></div>" +
  " <div id=smallDiv" +
    (a lot of code)
  "></div>" +
  "</div>",
  labelAnchor: new google.maps.Point(width/2, height/2),
  labelClass: "labelClass" // the CSS class for the label
}); 

是我做错了什么，还是这个功能目前有问题？

Answer 1

这是导致问题的默认谷歌地图标记。在标记所在的位置有一个 div，它包含默认的谷歌地图标记，但它不可见，因为它的不透明度设置为 0。但是如果你将鼠标悬停在该区域上，你会注意到 :hover 样式不工作，看起来有问题。

尝试将此应用于您的 CSS:

.gmnoprint {display:none !important}

我还注意到你在 CSS 中的评论:

#largeDiv { // Nothing happens
  opacity: 0.3;
}
#smallDiv { // Nothing happens
  width: 10px;
  height: 10px;
}

没有任何反应，因为您在 javascript 中使用了内联样式，它们覆盖了您的 css 中的样式。