Html 鼠标位于元素边缘时，悬停状态快速闪烁

我已经创建了一个锚定标记，看起来像一个按钮。当我将鼠标悬停在元素上时，人的名字会转换为他们名字和姓氏的首字母缩略词。当我的鼠标刚好在元素的边缘时，悬停开始快速闪烁，破坏了效果的平滑度

这是一个代码笔，演示了我遇到的问题：

HTML

---

这是解决办法。用div包裹按钮，并将悬停在div上而不是锚定上

正文{
字体系列：Helvetical、Arial、无衬线字体；
}
.姓名标志{
边缘顶部：20px；
}
.名称标志a{
文字装饰：无；
颜色：231f20；
字号：600；
边框：2px实心#231f20；
填充：10px；
文本对齐：居中；
显示：内联块；
}
.名称徽标：悬停a{
颜色：橙色；
边框颜色：橙色；
}
.name徽标：悬停一个跨距{
显示：无；
}

---

以下是解决方案。用div包裹按钮，并将悬停在div上而不是锚定上

正文{
字体系列：Helvetical、Arial、无衬线字体；
}
.姓名标志{
边缘顶部：20px；
}
.名称标志a{
文字装饰：无；
颜色：231f20；
字号：600；
边框：2px实心#231f20；
填充：10px；
文本对齐：居中；
显示：内联块；
}
.名称徽标：悬停a{
颜色：橙色；
边框颜色：橙色；
}
.name徽标：悬停一个跨距{
显示：无；
}

这是因为有两个悬停状态同时作用。拿出一个：悬停范围，你不需要它谢谢你的快速反应！我试过这样做，但我无法隐藏这些字母以将徽标转换为首字母缩写。我也尝试过将这些跨距字母作为伪类添加和删除，但这也没有改善问题。@Kedmasterk请通过单击左侧的灰色复选标记图标接受下面发布的答案。@herrh谢谢！你知道为什么瞄准div而不是锚定标签有效吗？这是因为你有两个悬停状态同时作用。拿出一个：悬停范围，你不需要它谢谢你的快速反应！我试过这样做，但我无法隐藏这些字母以将徽标转换为首字母缩写。我也尝试过将这些跨距字母作为伪类添加和删除，但这也没有改善问题。@Kedmasterk请通过单击左侧的灰色复选标记图标接受下面发布的答案。@herrh谢谢！你知道为什么瞄准div而不是锚定标签有效吗？

<a target="_blank" href="#">A<span>aron</span> Y<span>onda</span></a>