與CSS轉換爲網站的導航欄上的Firefox

奇特的情況下

我的網站地址是http://applocity.blogspot.com/與CSS轉換爲網站的導航欄上的Firefox

我有一個導航欄（#cssmenu如果你想找到它的源代碼）和一些奇怪的原因，這是發生：我做到了，所以鏈接在懸停時改變顏色，並且工作正常。但我想添加一個轉換，以便背景顏色通過淡入淡出來改變顏色。這在Chrome上運行良好，但只適用於Firefox上的子鏈接（例如設備和類別下）。我一直無法弄清楚爲什麼會發生這種情況。

#cssmenu a { 

background: #999999; 
color: #FFF; 
-webkit-transition: background 1s ease; 
-moz-transition: background 1s ease; 
-ms-transition: background 1s ease; 
-o-transition: background 1s ease; 
transition: background 1s ease; 
padding: 0px 25px; 

//border-radius: 5px; (NOT ACTIVE) 
} 

    #cssmenu ul li:hover > a { 

background: #66FF99; 
    color: #000000; 
-webkit-transition: background-color 0.3s ease; 
-moz-transition: background-color 0.3s ease; 
-ms-transition:background 0.3s ease; 
-o-transition: background-color 0.3s ease; 
transition: background-color 0.3s ease; 
}

（有更多的網站的源代碼 - CTRL + F #cssmenu）

我試過到目前爲止：

把代替背景顏色背景
使用-moz-transition ...當然
重新排序並放置在CSS代碼中的轉換屬性（例如在#cssmenu以及#cssmenu：hover中）

來源

2013-02-21 somil

你聲明一個HTML5的doctype？不知道這是否會做任何事情。 – 2013-02-21 01:12:53

對於這種有趣的東西，jQuery非常適合完整的跨瀏覽器兼容性！ – LazerSharks 2013-02-21 01:51:13

你爲什麼用'span'包裹'a'？ – 2013-02-21 04:09:41

我想通了。這裏是我的解決方案的鏈接。 http://jsfiddle.net/mrytF/2/

問題來自第59-61行。您有此代碼：

.cssmenu a { 
    -moz-transition: background 1s ease; 
}

當.cssmenu不存在時。所以我評論了這個代碼，現在它在Firefox中正常工作。我也談到了一些CSS，我認爲是多餘的

希望這有助於

編輯

修正了問題，不具有子菜單顯示。這裏的主要問題是，你需要將第22行作爲#cssmenu ul li.hover，當它需要是#cssmenu ul li:hover。這裏是小提琴

http://jsfiddle.net/mrytF/3/

來源

2013-02-21 04:28:16

我沒有瀏覽代碼的最後部分，因爲我很累;）希望這有助於 – 2013-02-21 04:37:58

與CSS轉換爲網站的導航欄上的Firefox

回答

相關問題