html - Firefox 上网站导航栏的 CSS 转换的特殊情况

标签 html css navbar

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

最佳答案

我想通了。这是我的解决方案的链接。 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。 这是 fiddle

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

关于html - Firefox 上网站导航栏的 CSS 转换的特殊情况,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14992938/

相关文章:

html - 没有应用等高的Bootstrap 4卡座

html - 在列表项下方 Bootstrap 相同的空间

html - 如何在 anchor 标签内放置两个元素

html - 我在网站的导航栏中使用border-left,border-right作为分隔线。我想知道如何将它们放在导航栏中

html - 悬停节目上的下拉菜单但不停留?

html - 使用 sed 将分析代码插入到大多数 html 文件中

javascript - 用于更新输入值的 Jquery Keyup 脚本不起作用

javascript - 打开/关闭菜单单击时仅使用 javascript 没有 jquery

css - 为什么我的两个菜单 "Font Awesome"图标突然显示为正方形?

javascript - 点击javascript函数的代码不起作用?