CSS Transition not working when removing class with jQuery

Question

I am using using css transition to add an animated effected to my links when they are hovered over.

One of links needs to be underlined by default i.e when no other link is hovered over, it should remain underlined and when other links are hovered over, the underline in the first link should be removed. I have achieved this with jQuery by adding and removing a classs however, the animated effect is lost. Is there a way to get back this animated effect on the first link?

Also when the underline from the first link is removed, all other links seem to move up?

$(".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>

Because you are removing the class which has transition property. — Harun Yilmaz
– Harun Yilmaz, Commented Sep 19, 2019 at 12:33

Roko C. Buljan · Accepted Answer · 2019-09-19 12:58:24Z

1

I'd use CSS-only:

Remove the underline from the preselected element if:

we're hovering the entire UL

we're not hovering the preselected element

.pivot-nav:hover a.default-underline:not(:hover):after {
  width: 0;
}

Example

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>

edited Sep 19, 2019 at 12:58

answered Sep 19, 2019 at 12:43

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user38208 Over a year ago

Thank you. This worked perfectly and such a simple solution. Thank you

Collectives™ on Stack Overflow

CSS Transition not working when removing class with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related