Css 将鼠标悬停在上方时，与文本同时更改背景

当鼠标悬停在按钮的边距上时，背景会因为li:hover而改变，但里面的文本不会改变，因为不会触发a:hover

我怎样才能解决这个问题

html{
字体大小：16px；
身高：100%；
}
身体{
最小高度：100%；
字体系列：“Livvic”，无衬线；
背景色：#EEE2DC；
颜色：#000；
}
#集装箱帕吉纳{
最大宽度：1000px；
保证金：0自动；
}
#导航栏>ul{
边缘顶部：50px；
}
#导航栏>ul>li>a{
文字装饰：无；
保证金：0；
颜色：#0269A4；
字体大小：粗体；
}
#导航栏>ul>li{
背景色：#fff；
保证金：0；
显示：内联块；
填充：0.875em 1.875em；
}
#导航栏>ul>li>a:悬停{
过渡：颜色0.4s；
颜色：#fff；
}
#导航栏>ul>li:悬停{
过渡：背景色0.4s；
背景色：#0269A4；
}
@仅介质屏幕和（最大宽度：1200px）
{
html{
字体大小：12px；
}
}

文件

选择器

#导航栏>ul>li>a:hover

仅在您位于

a

文本正上方时激活。相反，将其更改为

#导航栏>ul>li:hover>a

。这样，每当您将鼠标悬停在li框上的任何位置时，它也会更新

a

标记的颜色

#navigation-bar > ul > li:hover a{
    transition: color 0.4s;
    color: #fff;
}

---

当您将鼠标悬停在li上时，这将更改标记文本的颜色

将

li>a:hover

更改为

li:hover>a

将您的回复添加为答案。你是第一个回答的人，所以我会接受你的回答。