[英]CSS sliding underline
I have horizontal menu on my website. 我的网站上有水平菜单。 I want the menu links to smoothly underline. 我希望菜单链接顺利下划线。 HTML HTML
<nav id="nav_container">
<ul id="nav">
<li class="nav_item"><a href="#">Sportovci</a></li>
<li class="nav_item"><a href="#">Specialisté</a></li>
<li class="nav_item"><a href="#">Kluby</a></li>
<li class="nav_item"><a href="#">Obchody</a></li>
<li class="nav_item"><a href="#">Ligy</a></li>
<li class="nav_item"><a href="#">Články</a></li>
<li class="nav_item"><a href="#">Kontakt</a></li>
</ul>
</nav>
CSS CSS
.nav_item {
display: inline-block;
margin: 0 10px;
}
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.nav_item:hover:after {
width: 100%;
background: #236fe8;
}
With this code the link will underline from left to right on hover, but when i go out with mouse it doesn't smoothly go back. 使用此代码,链接将在悬停时从左到右加下划线,但是当我用鼠标外出时,它不会顺利返回。 I think it will be some JavaScript (jQuery), but don't know how. 我认为这将是一些JavaScript(jQuery),但不知道如何。 I also want the clicked (active) link to stay underlined. 我还希望点击(活动)链接保持下划线。 How to do this? 这个怎么做?
I will be thankful for every kind of answer. 我会感谢各种答案。
How about targeting the anchors instead of the .nav_item
s like so: 如何定位锚点而不是.nav_item
如下:
a:after {
content: '';
display: block;
height: 1px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
a:hover:after {
width: 100%;
background: #236fe8;
}
Here your updated jsFiddle . 在这里你更新了jsFiddle 。
replace your code with this one 用这个替换你的代码
.nav_item:after {
content: '';
display: block;
height: 1px;
width: 0;`enter code here`
background: transparent;
transition: width .5s ease, background-color .9s ease;
}
go to the following link for more help, i hope it will resolve your problem http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp 转到以下链接获取更多帮助,我希望它能解决您的问题http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.