2017-06-15 66 views
1

我有一個網站使用響應式圖像地圖,並且由於此響應式圖像地圖而導致跨瀏覽器翻轉效果非常具有挑戰性。我終於想出了一個適用於Chrome和Safari的解決方案,但奇怪的不是Firefox。Firefox CSS懸停錯誤

area.band-hover-1 { 
    z-index: 999999; 
    background-repeat: no-repeat; 
    display: block; 
    content: " "; 
    position: absolute; 
    top: 99px; 
    left: 300px; 
    height: 100px; 
    width: 109px; 
    background-size: contain; 
} 
area.band-hover-1:hover { 
    background-image: url(../img/band-hover-1.png); 
} 

的CSS是在Firefox中被應用,我可以看到它在開發工具引用圖像(.band懸停-1:懸停),但翻轉圖像不會在Firefox和谷歌的研究小時後出我只是無法弄清楚是什麼問題。

有誰知道爲什麼這不工作在Firefox?它必須與CSS相關,對嗎?


非常感謝您的提前!

+0

在此處發佈相關代碼,而不僅僅是作爲鏈接到現場網站,這可能會在未來發生變化。這個問題需要多年的相關。 – Barmar

+0

請在此處添加有意義的代碼和問題描述。請不要鏈接到需要修復的網站 - 否則,一旦 問題得到解決,或者您鏈接到的網站無法訪問,此問題將對未來的訪問者失去任何價值。發佈 [最小,完整和可驗證示例(MCVE)](https://stackoverflow.com/help/mcve) 演示您的問題將幫助您獲得更好的答案。欲瞭解更多信息,請參閱 [我網站上的某些內容不起作用。我可以直接粘貼一個鏈接嗎?](https://meta.stackexchange.com/questions/125997/) 謝謝! – j08691

+0

好的,謝謝我道歉我重新提出了這個問題,並閱讀了你的指導方針。感謝您的耐心等待。 – user436421

回答

1

有人有類似的問題。它在css中使用了更具體的選擇器來解決。.class:hover not working in firefox?

+0

謝謝我早些時候嘗試過該線程,並將區域標記添加到選擇器上並未解決問題。 – user436421

+1

我解決了Firefox不喜歡懸停區域上的代碼。我創建了一個包裝div,解決了這個問題。 – user436421