Question

我问的是一个特定问题的具体问题，我不知道该怎么办，但想添加到我的网站。

1）当父李有一个孩子的时候，我希望那个导航器在通过子元素时应用了效果。现在，当我不再在它上面盘旋时，它会失去悬停效果，并且当我希望父li在进行子导航时仍然具有悬停效果时，会对子元素应用悬停效果。

2）另一件我不知道该怎么做的是当我将鼠标悬停在任何导航链接上时的过渡效果，当它悬停进出时会有一种淡出效果。我该怎么做？

我试图这样做：

CSS：

#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;
}

它带来了意想不到的，但很酷的结果，带出了子菜单，滑向右边。这不是我想要的，但没关系。我只想要应用其他两个功能，但不要去哪里看。我的完整代码在这里：jsfiddle nav code

Answer 1

显示DEMO Transition

#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;
}

Answer 2

我修改了您的代码，将left属性更改为opacity并再添加一个transition。看看：http://jsfiddle.net/YfuDT/

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

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

2 个答案: