1. 首頁
  2. 問答
  3. CSS懸停效果在Firefox上不起作用...

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

2014-08-28 239 views
1

我在地圖上方有一些標記，目標是在每個標記上懸停效果以顯示其他信息。我爲圖像和以下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

+0

只是一個提示。 Stackoverflow有一個特殊的腳本區域。只需點擊一次，然後輸入4個空格。所有具有4個空格的東西都將放置在腳本區域中，以便看起來更好。 – Vinc199789 2014-08-28 17:13:14

+1

你可以發佈你的HTML嗎？ – APAD1 2014-08-28 17:14:34

+0

首先，所有'！重要'都有哪些。儘量避免使用它們。其次，最好的做法是在沒有懸停的情況下定義僞'：before'，而只是在懸停時切換僞元素（即其顯示屬性）。 – 2014-08-28 17:41:36

回答

1

請勿使用no-repeat裏面的content財產。按規格no-repeat無效content屬性值。
如果你想要更多的圖像控制使用background屬性。由於使用content插入的圖像或漸變無法調整大小。

來源

2014-08-28 17:25:50 neilhem

0

這裏的問題是您在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

相關問題

 相關問題