Html 当鼠标在公共块外时，如何使动画结束？

当我将鼠标移到文本块“services right”上时，将触发动画，文本将向右移动。当我将光标移动到“关于我们--服务”按钮时，文本返回到其左侧位置

如何使文本在光标位于按钮上时不向左移动，而在鼠标光标位于文本和按钮块之外时返回到左侧位置

（运行截取的代码以了解我的意思）

---

当我将鼠标悬停在按钮上时，文本不应向左移动，如果文本在按钮和文本区域之外，则应向左移动

。服务权{
利润上限：70像素；
}
.关于我们--服务文本{
位置：绝对位置；
z指数：1；
右：34%；
顶部：180像素；
过渡：0.6s缓进；
}
.关于我们--服务文本：悬停{
转化：translateX（10%）；
}
.关于我们--服务的标题{
浮动：对；
字号：700；
}
.关于我们--服务按钮{
显示：内联块；
左边距：30px；
填充：25px 50px 25px 50px；
背景：无；
颜色：蓝色；
字体大小：粗体；
位置：相对位置；
过渡：颜色0.25秒；
边框：3px实心#383736；
光标：指针；
}
.关于我们--服务按钮：之后{
位置：绝对位置；
内容：''；
排名：0；
左：0；
宽度：0；
身高：100%；
背景色：#383736；
变换原点：左；
过渡：宽度0.25s；
z指数：-1；
}
.关于我们--服务按钮：悬停：之后{
宽度：100%；
}
.关于我们--服务按钮标题{
位置：绝对位置；
右：40px；
底部：12px；
}
img{
最大宽度：150px；
最小宽度：150px；
最小高度：100px；
最大高度：100px；
}
.服务权{
浮动：对；
}

首先测试标题文本


测试字幕
Abcdfeghrf

以0秒的速度向元素添加另一个

过渡

，因此“回车”动画在0.6秒时出现，退出动画在0秒时出现：

。服务权{
利润上限：70像素；
}
.关于我们--服务文本{
位置：绝对位置；
z指数：1；
右：34%；
顶部：180像素；
过渡：0.6s缓进；
}
.services right:悬停.关于我们--服务文本{
转化：translateX（10%）；
}
.关于我们--服务的标题{
浮动：对；
字号：700；
}
.关于我们--服务按钮{
显示：内联块；
左边距：30px；
填充：25px 50px 25px 50px；
背景：无；
颜色：蓝色；
字体大小：粗体；
位置：相对位置；
过渡：颜色0.25秒；
边框：3px实心#383736；
光标：指针；
}
.关于我们--服务按钮：之后{
位置：绝对位置；
内容：''；
排名：0；
左：0；
宽度：0；
身高：100%；
背景色：#383736；
变换原点：左；
过渡：宽度0.25s；
z指数：-1；
}
.关于我们--服务按钮：悬停：之后{
宽度：100%；
}
.关于我们--服务按钮标题{
位置：绝对位置；
右：40px；
底部：12px；
}
img{
最大宽度：150px；
最小宽度：150px；
最小高度：100px；
最大高度：100px；
}
.服务权{
浮动：对；
}

首先测试标题文本


测试字幕
Abcdfeghrf

这是可行的，当我将鼠标移到按钮上时，我的文本将向左移动。您希望文本在悬停时向右移动，然后停止动画并在光标离开按钮时保持在该位置？当我将鼠标悬停在按钮上时，文本不应向左移动，如果它位于按钮和文本区域之外，则应向左移动