CSS父元素hover触发子元素动画 导航文字上移效果实现

要实现悬停时仅文字上移、不破坏原有顶部线条动画，核心是把文字和伪元素实现的线条做动画隔离，不需要改动原有已写好的动画代码，只需要做两处小调整：

1. 修改导航项HTML结构 #

给每个a标签内的文字单独套一层span标签，作为动画的独立承载元素，避免位移影响到挂在a标签上的伪元素线条：

<ul class='snip1168'>
  <li class='current'><a href="#" data-hover="Work"><span>Work</span></a></li>
  <li><a href="#" data-hover="Recs"><span>Recs</span></a></li>
  <li><a href="#" data-hover="Say Hi"><span>Say Hi</span></a></li>
</ul>

2. 追加CSS规则 #

在原有样式表末尾追加以下代码即可：

.snip1168 a span {
  display: inline-block;
  transition: transform ease 400ms;
}

.snip1168 li:hover a span {
  transform: translate(0, -10px);
}

注意点 #

• 不要直接给a标签加transform属性：::before伪元素属于a标签的渲染子节点，直接给a加位移会带着顶部线条一起上移，破坏原有动画效果
• 选择器使用li:hover触发而不是a:hover：可以保证鼠标悬停在整个li的热区（包括线条展示的区域）时，动画都能稳定触发，不会出现鼠标移到线条位置动画回弹的问题
• 给span设置display: inline-block：transform属性对默认的行内元素不生效，加这个属性才能让位移动画正常作用在文字上

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