使用 jQuery 删除类时 CSS 转换不起作用

Question

我正在使用 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>

Answer 1

我只使用 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>