Question

我的网站地址为http://applocity.blogspot.com/

我有一个导航栏（#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。

Answer 1

我明白了。这是我的解决方案的链接。 http://jsfiddle.net/mrytF/2/

问题来自第59-61行。你有这个代码：

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

.cssmenu不存在时。所以我对这段代码进行了评论，现在它在firefox中工作正常。我还评论了一些我认为多余的CSS

希望这有帮助

修改

修复了没有显示子菜单的问题。这里的主要问题是，当需要#cssmenu ul li.hover时，您将第22行设为#cssmenu ul li:hover。这是小提琴

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

Firefox上网站Navbar的CSS转换的特殊情况

1 个答案: