使用jQuery移除类时CSS Transition失效及导航位移问题求助

我来帮你搞定这两个问题——动画消失和链接偏移，咱们从问题根源入手，一步步修复：

问题分析 #

1. 动画丢失：你在.default-underline:after里重复定义了伪元素样式，还加了!important强制覆盖了transition属性，而且width: auto无法参与过渡动画，直接导致第一个链接的下划线切换时没有平滑效果。
2. 链接偏移：原来的.default-underline:after用了position: relative，这会让伪元素占据文档流空间，当你移除这个类时，伪元素消失，链接就会向上偏移。

修复方案 #

1. 重构CSS代码 #

统一伪元素样式，去掉冗余定义和!important，同时预留下划线空间避免布局偏移：

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;
  padding-bottom: 4px; /* 预留下划线高度空间，避免偏移 */
} 

/* 统一所有链接的下划线伪元素样式 */
.pivot-nav li a:after { 
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: #fff;
  transition: width 0.3s ease, left 0.3s ease; /* 保留过渡动画 */
}

/* 第一个链接默认显示下划线 */
.pivot-nav li a.default-underline:after { 
  width: 100%; 
}

/* 悬停时显示下划线 */
.pivot-nav li a:hover:after { 
  width: 100%; 
}

2. 优化jQuery逻辑 #

简化选择器，确保只针对非第一个链接的hover事件处理：

// 监听除第一个链接外的所有导航链接的hover事件
$(".pivot-nav-item a:not(.o-c)").hover(
  function() { 
    $('.o-c').removeClass("default-underline"); 
  }, 
  function() { 
    $('.o-c').addClass("default-underline"); 
  }
);

3. 保持HTML结构不变 #

<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>

为什么这样改？ #

• 所有链接的下划线伪元素共用一套样式，保证动画一致性，.default-underline只负责控制宽度为100%，不再重复定义伪元素。
• 给a标签加padding-bottom:4px，刚好匹配下划线高度，伪元素用绝对定位不占文档流，切换类时布局不会变动，解决偏移问题。
• 简化jQuery选择器，用:not(.o-c)精准匹配目标链接，代码更清晰易维护。

内容的提问来源于stack exchange，提问作者user38208