html 下划线 滑动,CSS滑动下划线

我的网站上有水平菜单。我想让菜单链接平滑地划线。 HTMLCSS滑动下划线

• Sportovci
• Specialisté
• Kluby
• Obchody
• Ligy
• Články
• Kontakt

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;

}

有了这个代码，由左到右悬停在链接将强调，但是当我用鼠标出门不顺利回去。我认为这将是一些JavaScript(jQuery)，但不知道如何。 我也希望点击(活动)链接保持下划线。这个怎么做？

我会感谢各种答案。

2013-12-12

jstorm31

+18

看起来没给我吗？ http://jsfiddle.net/fX6xz/还在Chrome，Firefox和IE中进行测试。 –

+0

是的，看起来对我也很好.. –

+2

也许你想添加一个'#nav_container a {text-decoration：none; }'让你的效果更加明显。 –