Question

所以我现在正试图让我的菜单（在添加子菜单之前运行良好）在悬停时淡化颜色。我无法真正理解问题是什么，但猜测webkit函数（再次，之前有效，我没有触及它）并没有真正影响悬停功能。

在此处查找代码：

jsfiddle.net/ChH4F

Answer 1

您的转换很好，但a标签上没有悬停状态，则无需更改。

这是我添加的内容，

ul#navmenu li a:hover {
   color: rgba(0, 0, 0, 0.4);
}

这是我更改的内容，因为您不需要all，

-webkit-transition: color 0.7s ease;
-moz-transition: color 0.7s ease;
-o-transition: color 0.7s ease;
-ms-transition: color 0.7s ease;
transition: color 0.7s ease;

这是JSFIDDLE。

Revision 1 - 相同颜色的淡化子菜单链接

Revision 2 - 不同颜色的淡化子菜单链接

没有JS / jQuery 的下拉式淡入淡出，

ul#navmenu li ul.sub-menu {
   position: absolute;
   top: 40px;
   left: 0;
   width: 165px;
   background-color:rgba(0, 13, 38, 0.9);
   text-align:left;
   color:black;
   opacity: 0; /* Used to make it fade */
   height: 0; /* Used to make it fade */
   overflow: hidden; /* Used to make it fade */
}
ul#navmenu li:hover ul.sub-menu {
   opacity: 1; /* Used to make it fade */
   height: auto; /* Used to make it fade */
   overflow: none; /* Used to make it fade */
}

另请不要忘记将css-transitions添加到您的主ul，ul.sub-menu。

Fade-in-out Menu

您忘记添加的内容，

ul#navmenu, ul#navmenu ul.sub-menu {
   margin: 0px;
   padding: 0;
   padding-top:px;
   list-style-type: none;
   list-style-image: none;
   width: auto;
   height: auto;
   transition: all 0.6s ease;
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
}

您需要更改元素的transition: all 0.6s ease;，否则它只会显示/隐藏。

CSS -webkit在菜单中淡入淡出

1 个答案: