Html 链接闪烁，如果我把光标指向该链接

早上好，这里有一些问题，希望任何人都能帮我解决，当我在菜单链接上悬停时，它的开始总是闪烁，除非我移除光标，否则它不会停止。另外，当我将菜单悬停时，菜单会移到当前位置，他会获得另一个边距或填充，我想它不会停留在他所在的位置

nav{
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
宽度：100%；
高度：8雷姆；
背景颜色：深红色；
}
导航标志{
显示：内联块；
宽度：50%；
颜色：#ffffff；
字体大小：3rem；
字号：800；
左侧边缘：3rem；
}
导航标志h4{
显示：内联块；
}
导航链路{
显示器：flex；
证明内容：柔性端；
对齐项目：居中；
宽度：50%；
身高：6雷姆；
}
导航链路{
显示：内联块；
填充：0 4rem；
字母间距：2px；
变换：透视图（1px）translateZ（0）；
盒影：0.01×rgba（117,94,94,0）；
}
导航链接ul li a{
字号：700；
颜色：#fff；
文本转换：大写；
}
导航链接ul li：悬停{
文本对齐：居中；
光标：指针；
背景色：#127681；
颜色：#fff；
填充：.8rem 1rem；
边界半径：25px；
动画名称：hvrpush；
动画持续时间：0.3s；
动画计时功能：线性；
动画迭代次数：1；
}
@关键帧hvr推送{
50% {
变换：比例（0.8）；
}
100% {
变换：比例（1）；
}
}

陪审团发展

您的代码存在问题：

问题1:li:hover应该是

a:hover

（参见下面的代码）。为什么？必须以要悬停的主元素为目标，才能停止闪烁

问题2：需要块属性（即宽度、填充、高度等）的内联元素必须具有

显示：内联块

（请参见下面的代码）

问题3：目标定位标记没有

填充：.8rem 1rem

，但悬停选择器有。因此，当鼠标悬停在它们上方时，它会添加

填充：.8rem 1rem

，这会导致位置移动

下面的代码是我更改的，css中的所有其他内容都没有对您的问题产生直接影响

nav.nav链接ul li{
显示：内联块；
填充：0 3rem；
字母间距：2px；
变换：透视图（1px）translateZ（0）；
盒影：0.01×rgba（117,94,94,0）；
}
导航链接ul li a{
字号：700；
颜色：#fff；
文本转换：大写；
文本对齐：居中；
填充：.8rem 1rem；
}
导航链接{
字号：700；
颜色：#fff；
文本转换：大写；
填充：0px；
}
导航链接ul li a：悬停{
显示：内联块；
光标：指针；
背景色：#127681；
颜色：#fff；
填充：.8rem 1rem；
边界半径：25px；
动画名称：hvrpush；
动画持续时间：0.3s；
动画计时功能：线性；
动画迭代次数：1；
}

我能想到的唯一解决方案是将javascript与addEventListener（）结合使用。这是因为我认为关键帧不能用于悬停效果。