[英]How to add a hover transition effect on the navigation?
I am asking a specific question about a specific problem that I don't know how to do but would like to add to my site. 我在问一个关于特定问题的特定问题,我不知道该怎么做,但想添加到我的网站中。
1) When the parent li has a child, I want that nav to stayed hovered with the effect applied when going through the child elements. 1)当父级li有了孩子时,我希望该导航保持在通过子元素时应用的效果上徘徊。 Right now, when I am no longer hovered over it, it will lose its hover effect and apply hover effects on the child elements when I want the parent li to still have the hovered effect when going through the sub navigation.
现在,当我不再将鼠标悬停在其上时,当我希望父级li在通过子导航时仍具有悬停效果时,它将失去其悬停效果并将悬停效果应用于子元素。
2)And the other thing I do not know how to do is transition effect when I hover over any navigation links, it will sort of have an fade in out effect when hovered in and out from. 2)另外我不知道该怎么做,就是当我将鼠标悬停在任何导航链接上时的过渡效果,将鼠标悬停在其中时会产生渐入渐出的效果。 How do I do this?
我该怎么做呢?
I attempted to do this: 我试图这样做:
CSS: 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;
}
It brought about unexpected, but cool results of bringing out the submenus, sliding to the right. 它带来了子菜单向右滑动的出乎意料但很酷的结果。 It's not what I intended, but okay.
这不是我想要的,但是可以。 I just wanted the other two features applied but don't where to look.
我只想应用其他两个功能,但不看哪里。 My full code is here: jsfiddle nav code
我的完整代码在这里: jsfiddle导航代码
Show 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;
}
I edited your code, changing left
property to opacity
and adding one more transition
. 我编辑了您的代码,将
left
属性更改为opacity
并添加了另外一个transition
。 Take a look: http://jsfiddle.net/YfuDT/ 看看: http : //jsfiddle.net/YfuDT/
About part 1 of your question, I am afraid you won't achieve it with css, some javascript necessary. 关于您的问题的第1部分,恐怕您无法使用CSS(某些必要的JavaScript)来实现。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.