CSS 悬停效果在 Firefox 上不起作用……

Question

我在 map 顶部有一些标记，目标是在每个标记上产生悬停效果以显示额外信息。我为图像和以下 CSS 使用了 ID:

#pan {
  position: absolute;
  display: inline-block;
}

#pan:hover:before {
  content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') no-repeat !important;
  display: block;
  position: absolute!important;
  top: 50px;
  right: -200px!important;
  z-index: 9999!important;
}

在 safari 中效果很好!但是，Firefox 中没有任何反应。任何帮助将不胜感激!

Answer 1

不要在 content 属性中使用 no-repeat。根据规范 no-repeat 不是有效的 content 属性值。
如果您想要更多图像控制，请使用 background 属性。由于使用 content 插入的图像或渐变无法调整大小。