CSS3轉換/懸停效果在Firefox中不起作用;一個Firefox錯誤？

我正試圖創建一個鼠標懸停效果，將頂層滑動到左側，並使用CSS3顯示底層。該代碼適用於Chrome，但不適用於Firefox ...我又做了一些愚蠢的事情嗎？謝謝你的幫助！CSS3轉換/懸停效果在Firefox中不起作用;一個Firefox錯誤？

編輯：一定是我做錯了什麼事，因爲即使我離開了過渡的代碼，當我在Firefox將鼠標懸停在「圖層」什麼也沒有發生... :(

代碼：

<html> 
    <div class="layers"> 
    <div class="over">content</div> 
    <div class="under">content</div> 
    </div> 
</html>

風格：

.layers { 
    position: relative; 
    width: 200px; 
    height: 50px; 
    overflow: hidden; 
} 

.over { 
    width: 200px; 
    height: 50px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    z-index: 1; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 
} 
.under { 
    width: 200px; 
    height: 50px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
}   

.layers:hover .over { 
    left: -200px; 
}

來源

2011-06-10 nubicurio

鑑於這似乎取決於你正在做的確切的ajax東西，只是顯示CSS是不是真正足夠的信息來回答這個問題。指向整個頁面？ – 2011-06-11 05:13:00

我剛發現它實際上與Ajax無關;即使作爲獨立頁面，CSS過渡，甚至一個簡單的「.over：hover」在Firefox中都不起作用...... :( – nubicurio 2011-06-17 10:14:40

哪FF版本？它對我有用FF4 – clairesuzy 2011-06-17 10:28:39

原來存在在Firefox（firefox hover opacity）中的錯誤，我通過改變

.layers:hover .over {}

解決了這個問題，以

[class="layers"]:hover over {}

我升級到Firefox 5（從Firefox 4）;不知道該錯誤是否已經修復或不...

來源

2011-06-23 14:55:10 nubicurio

看到這個問題：Why is my CSS3 Transition not working in Firefox?

來源

2011-06-10 17:17:37 Stuart

雖然我不太明白他在說些什麼......你會介意爲我澄清嗎？「它看起來像FF不會轉換默認值。要在原始元素上聲明，然後纔會轉換到新屬性。「 – nubicurio 2011-06-10 17:20:30

這意味着應該在原始'.over' div上聲明明確的'left：0;'，而不是將其保留爲默認值，這樣做我認爲這是可能的在這種情況下不是原因 – clairesuzy 2011-06-17 10:30:29

CSS3轉換/懸停效果在Firefox中不起作用;一個Firefox錯誤？

回答

相關問題