Question

我在地图顶部有一些标记，目标是在每个标记上悬停效果以显示其他信息。我使用ID作为图像和以下CSS：

#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;
}

在野生动物园中表现出色！但是，Firefox中没有任何反应。任何帮助将不胜感激！

Answer 1

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

Answer 2

此处的问题是您在no-repeat媒体资源上使用content。只需删除它。

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

<强> DEMO

CSS悬停效果无法在Firefox上运行...

2 个答案: