Html 如何在导航上添加悬停过渡效果？

我问了一个具体的问题，关于一个我不知道怎么做，但想添加到我的网站的具体问题

1） 当父li有子元素时，我希望导航保持悬停状态，并在遍历子元素时应用效果。现在，当我不再将鼠标悬停在它上面时，它将丢失其悬停效果，并在我希望父li在通过子导航时仍具有悬停效果时，将悬停效果应用于子元素

2） 另一件我不知道如何做的事情是，当我在任何导航链接上悬停时，它会有一种淡入淡出的效果。我该怎么做

我试图这样做：

CSS:

---

它带来了意想不到的，但很酷的结果，显示子菜单，滑动到右侧。这不是我想要的，但没关系。我只是想应用另外两个功能，但不想看哪里。我的完整代码在这里：

我编辑了您的代码，将

left

属性更改为

不透明度

，并再添加一个

转换

。看一看:

---

关于你问题的第1部分，我担心你无法用css实现它，需要一些javascript。

我编辑了你的代码，将

left

属性更改为

不透明

，并添加了一个

转换

。看一看:

关于你问题的第1部分，我恐怕你不能用css实现它，一些javascript是必需的。

Show

展示

---

正是我想要的。谢谢不过我有个问题。我注意到您的转换语法与我的不同，将转换属性放在计时函数之后。在进行转换时，顺序是否重要，例如它是否影响动画的结果？欢迎！是的。。阅读“解决所有问题”一文，了解更多有关transitions属性的示例，请查看以下内容：！祝你好运并享受它！：）正是我想要的。谢谢不过我有个问题。我注意到您的转换语法与我的不同，将转换属性放在计时函数之后。在进行转换时，顺序是否重要，例如它是否影响动画的结果？欢迎！是的。。阅读“解决所有问题”一文，了解更多有关transitions属性的示例，请查看以下内容：！祝你好运并享受它！：）

#nav li:hover > ul{ /*display sub menus when hovered over*/
    left:0; /*show menu when hovered*/
    z-index:100; /*places the sub nav in frontier of all elements*/
    transition: all 2.4s ease-in-out -2s; /*transition: property duration timing-function delay;*/
    -moz-transition: all 2.4s ease-in-out -2s;
    -webkit-transition: all 2.4s ease-in-out -2s;
}

#nav a:hover{ 
    transition: ease-in-out all .4s; 
    -moz-transition: ease-in-out all .4s;
    -webkit-transition: ease-in-out all .4s;
    background-color:#000000;
    color:#FFFE41;
    text-decoration:none;
    font-weight:bold;
}