CSS 滑动下划线答案

【问题标题】：CSS sliding underlineCSS 滑动下划线
【发布时间】：2013-12-23 15:55:27
【问题描述】：

我的网站上有横向菜单。我希望菜单链接平滑地下划线。 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

.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)，但不知道如何。我还希望单击（活动）链接保持下划线。如何做到这一点？

我会感谢每一种答案。

【问题讨论】：

我觉得还可以吗？ jsfiddle.net/fX6xz 也在 Chrome、Firefox 和 IE 中进行了测试。
是的，我也觉得不错..
也许您想添加一个#nav_container a { text-decoration: none; } 以使您的效果更加明显。
确保添加浏览器前缀、-moz-transition 等
仅供参考：不适用于我的 IE10

标签： javascript jquery html css

【解决方案1】：

如何定位锚点而不是像这样的.nav_items：

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

这里是你的updated jsFiddle。

【讨论】：

【解决方案2】：

用这个替换你的代码

.nav_item:after {
    content: '';
    display: block;
    height: 1px;
    width: 0;`enter code here`
    background: transparent;
    transition: width .5s ease, background-color .9s ease;
}

更多帮助请点击以下链接，希望能解决您的问题 http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

【讨论】：