Html 如何使用动画图标悬停文本

我真的需要一些帮助。我在悬停上一个按钮时遇到困难。我希望此按钮与动画图标一起滚动。但是现在，它只滚动动画图标，而不是文本。下面是按钮、HTML和CSS代码的截图。谢谢大家!

按钮状态现在

.link2{
颜色：#000；
光标：指针；
字体大小：400；
文字装饰：无；
}
.link--箭头2{
颜色：#000；
显示：内联块；
高度：2em；
线高：2rem；
}
.链接--箭头2.箭头-icon2{
位置：相对位置；
顶部：-1px；
-webkit转换：-webkit转换0.3s易用性；
转换：-webkit转换0.3s轻松；
转换：转换0.3s轻松；
转换：转换0.3s易用性，-webkit转换0.3s易用性；
垂直对齐：中间对齐；
}
.link--箭头2.箭头图标--圆圈2{
颜色：#000；
-webkit过渡：笔划偏移0.3s轻松；
过渡：笔划偏移0.3s；
行程：95；
行程偏移量：95；
}
.link--arrowed2:悬停.arrow-icon2{
颜色：#000；
-webkit转换：translate3d（-5px，0，0）；
变换：translate3d（-5px，0，0）；
}
.link--箭头2:悬停.箭头图标--圆圈2{
颜色：#000；
笔划偏移：0；
}

---

您在html中使用了太多的

a

标记。每个链接只需要一个锚定标记

结果是，当您将鼠标悬停在链接的任何部分时，您的效果都将应用

.link2{
颜色：#000；
光标：指针；
字体大小：400；
文字装饰：无；
}
.link--箭头2{
颜色：#000；
显示：内联块；
高度：2em；
线高：2rem；
}
.链接--箭头2.箭头-icon2{
位置：相对位置；
顶部：-1px；
-webkit转换：-webkit转换0.3s易用性；
转换：-webkit转换0.3s轻松；
转换：转换0.3s轻松；
转换：转换0.3s易用性，-webkit转换0.3s易用性；
垂直对齐：中间对齐；
}
.link--箭头2.箭头图标--圆圈2{
颜色：#000；
-webkit过渡：笔划偏移0.3s轻松；
过渡：笔划偏移0.3s；
行程：95；
行程偏移量：95；
}
.link--arrowed2:悬停.arrow-icon2{
颜色：#000；
-webkit转换：translate3d（-5px，0，0）；
变换：translate3d（-5px，0，0）；
}
.link--箭头2:悬停.箭头图标--圆圈2{
颜色：#000；
笔划偏移：0；
}

很高兴这对您有所帮助！请接受答案，这样任何有类似问题的人都可以找到解决方案。太好了！我刚刚做到了！对不起，我是新来的。再次感谢您的帮助！