Html 如何完成悬停效果

我希望我的悬停效果是完整的，如图所示。我的只突出显示文本周围的一小部分。 我错过了什么？请为解决方案添加解释

css:

---

在css中修改以下选择器

.nav ul
{
    text-align: center;
    margin:0;
}
.nav li
{
    width: 6em;
    letter-spacing:0.1em;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;  
    padding:10px;
}

唯一突出显示的是您的li。如果你的ul有余量，那么突出显示的li和你的ul的其余部分（可以这么说）之间会有空间。从ul中删除边距，然后添加padding:10px以获得相同的“缓冲区”，使其看起来相同，但也提供了您想要的高光

.nav
{
保证金：0自动；
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
z指数：4；
背景颜色：rgba（1721776,0.68）；
}
美国海军
{
文本对齐：居中；
保证金：0；
}
李国荣先生
{
宽度：6em；
字母间距：0.1米；
显示：内联块；
文字装饰：无；
文本转换：大写；
填充：10px；
}
.导航a{
/*显示：内联块*/
文字装饰：无；
颜色：#D12C2C；
}
李海军：悬停
{
颜色：#666；
背景色：#ED8C8C；
}
李海军：悬停在a上
{
颜色：#fff；
}

在css中修改以下选择器

.nav ul
{
    text-align: center;
    margin:0;
}
.nav li
{
    width: 6em;
    letter-spacing:0.1em;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;  
    padding:10px;
}

唯一突出显示的是您的li。如果你的ul有余量，那么突出显示的li和你的ul的其余部分（可以这么说）之间会有空间。从ul中删除边距，然后添加padding:10px以获得相同的“缓冲区”，使其看起来相同，但也提供了您想要的高光

.nav
{
保证金：0自动；
宽度：100%；
位置：绝对位置；
顶部：0px；
左：0px；
z指数：4；
背景颜色：rgba（1721776,0.68）；
}
美国海军
{
文本对齐：居中；
保证金：0；
}
李国荣先生
{
宽度：6em；
字母间距：0.1米；
显示：内联块；
文字装饰：无；
文本转换：大写；
填充：10px；
}
.导航a{
/*显示：内联块*/
文字装饰：无；
颜色：#D12C2C；
}
李海军：悬停
{
颜色：#666；
背景色：#ED8C8C；
}
李海军：悬停在a上
{
颜色：#fff；
}