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

2014-08-28 121 views 1 likes

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

#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中没有任何反应。任何帮助，将不胜感激！

来源

2014-08-28 Jonathan Wield

只是一个提示。 Stackoverflow有一个特殊的脚本区域。只需点击一次，然后输入4个空格。所有具有4个空格的东西都将放置在脚本区域中，以便看起来更好。 – Vinc199789 2014-08-28 17:13:14

你可以发布你的HTML吗？ – APAD1 2014-08-28 17:14:34

首先，所有'！重要'都有哪些。尽量避免使用它们。其次，最好的做法是在没有悬停的情况下定义伪'：before'，而只是在悬停时切换伪元素（即其显示属性）。 – 2014-08-28 17:41:36

回答

请勿使用no-repeat里面的content财产。按规格no-repeat无效content属性值。
如果你想要更多的图像控制使用background属性。由于使用content插入的图像或渐变无法调整大小。

来源

2014-08-28 17:25:50 neilhem

这里的问题是您在content属性上使用no-repeat。只要删除它。

#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

来源

2014-08-28 17:29:07

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

回答

相关问题