CSS-переход не работает при удалении класса с помощью jQuery

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>