如何用Tailwind CSS实现悬停链接触发其他元素动画并解决位移问题？

问题分析 #

1. 动画触发范围错误：原代码中group类加在外部div上，但动画依赖group-hover，而实际需要触发动画的是链接文本（About），导致只有悬停到绝对定位的空白span时才会触发。
2. 悬停左移问题：添加border-r-8会改变元素宽度，结合原定位-right-4，视觉上造成父元素左移的错觉。

修复代码（推荐方案） #

用空span替代冗余的空白字符，同时将group类移到链接标签上，确保hover文本时触发动画，且不影响布局：

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

<div class="text-black text-xs text-center">  
  <a href="#" class="group relative inline-block">
    About
    <span class="absolute -z-10 top-0 right-0 h-full w-0 transition-all duration-300 ease-in-out group-hover:w-8 group-hover:border-r-8 group-hover:border-red-700"></span>
  </a>
</div>

关键修改点 #

• 将group类从外层div移到<a>标签上：使hover链接文本（About）时直接触发group-hover动画。
• 移除 ：用空span配合w-0默认隐藏，hover时扩展宽度并显示边框，避免无效空白内容。
• 调整定位为right-0：确保边框在链接右侧，不会造成布局偏移；添加h-full让边框高度与链接一致。

另一种兼容原结构的修复 #

如果需要保留原有span结构，可通过透明边框固定宽度避免位移：

<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>

<div class="text-black text-xs text-center">  
  <a href="#" class="group relative inline-block">
   <span>
     About
   </span>
   <span class="absolute -z-10 top-0 right-0 h-full w-8 border-r-8 border-transparent transition-colors duration-300 ease-in-out group-hover:border-red-700">
   </span>   
 </a>
</div>

这里通过默认设置透明边框固定宽度，hover时仅修改边框颜色，避免宽度变化导致的位移问题。

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