Question

我的网站上有水平菜单。我希望菜单链接顺利下划线。 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），但不知道如何。我还希望点击（活动）链接保持下划线。怎么做？

我会感谢各种答案。

Answer 1

如何定位锚点而不是像.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;
}

这是您的updated jsFiddle。

Answer 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

CSS滑动下划线

2 个答案: