我使用CSS过渡将鼠标悬停在链接上时，向其添加了动画效果。
默认情况下，其中一个链接需要带下划线，即当没有其他链接悬停时，应保持带下划线，而当其他链接悬停时，应删除第一个链接中的下划线。我已经通过添加和删除类来使用jQuery实现了这一点，但是动画效果丢失了。有没有办法在第一个链接上恢复这种动画效果？
同样，当第一个链接的下划线被删除时，所有其他链接似乎都向上移动？
$(".c-f, .i-c, .c-u").hover(function() {
$('.o-c').removeClass("default-underline");
}, function() {
$('.o-c').addClass("default-underline");
});body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:hover::after {
width: 100%;
}
.default-underline:after {
width: 100%;
}
.pivot-nav li a:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
position: absolute;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
width: 0;
}
.default-underline:after {
background: none repeat scroll 0 0 transparent;
bottom: 0;
content: "";
display: block;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s, left 0.3s ease 0s;
position: relative !important;
width: auto !important;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="o-c default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item"><a class="c-f" href="#">Link 1</a></li>
<li class="pivot-nav-item"><a class="i-c" href="#">Link 2</a></li>
<li class="pivot-nav-item"><a class="c-u" href="#">Link 3</a></li>
</ul>我只会使用CSS：
如果发生以下情况，请从预选元素中删除下划线：
- 我们将整个UL悬停
- 我们没有将预选元素悬停
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
例
body {
background: black;
}
.pivot-nav {
list-style: none;
font-family: 'Montserrat';
}
.pivot-nav li a {
font-size: 1.6rem;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
position: relative;
color: #fff;
text-decoration: none;
}
.pivot-nav li a:after {
content: "";
display: block;
position: absolute;
bottom: 0;
width: 0;
height: 4px;
background: #fff;
transition: width 0.3s ease 0s;
}
.pivot-nav:hover a.default-underline:not(:hover):after {
width: 0;
}
.pivot-nav li a.default-underline:after,
.pivot-nav li a:hover:after{
width: 100%;
}<ul class="pivot-nav">
<li class="pivot-nav-item"><a class="default-underline" href="#">Our Company</a></li>
<li class="pivot-nav-item"><a href="#">Link 1</a></li>
<li class="pivot-nav-item"><a href="#">Link 2</a></li>
<li class="pivot-nav-item"><a href="#">Link 3</a></li>
</ul>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句