我的网站上有水平菜单。我希望菜单链接顺利下划线。 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),但不知道如何。 我还希望点击的(事件)链接保持下划线。如何做到这一点?
我将感谢每一种回答。
最佳答案
如何定位 anchor 而不是像这样的 .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 .
关于javascript - CSS 滑动下划线,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20544309/