2

我的网站地址是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）

到目前为止我已经尝试过：

  1. 放置背景颜色而不是背景
  2. 使用-moz-transition ...当然
  3. 重新排序并放置我在 CSS 代码中放置过渡属性的位置（例如，在 #cssmenu 和 #cssmenu:hover 下）。
4

1 回答 1

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/

于 2013-02-21T04:28:16.470 回答