利用CSS怎么实现这种将鼠标移动到li上然后li的背景颜色变灰的同时里面的超链接文字颜色也跟着改变？

利用CSS怎么实现这种将鼠标移动到li上然后li的背景颜色变灰的同时里面的超链接文字颜色也跟着改变？

运行结果及报错内容 ：
我的做法只能实现让li的背景颜色变灰，但是里面的超链接文字颜色不变
或者只能将鼠标移动到超链接上才会让其变色，并不是移动到li上就变色

我的解答思路和尝试过的方法 ：

            li:hover{
                background-color: #edeef0;
                color: #ff8400;
            }

li:hover{
        background-color: #edeef0;
        color: #ff8400;
 }
li:hover a {
        color: red;
}

可以考虑写一个 监听，我大概手写一个：

$("li").onmouseover(function(){
  $(this).css("backgroud-color",“#edeef0”)；
  $(this).css("color",“red”)；
})
$("li").onmouseleave(function(){
  $(this).css("backgroud-color",“”)；
  $(this).css("color",“black”)；
})

如非要你那种写法，你需要再写一个

             li:hover a{
                background-color: #edeef0;
                color: #ff8400;
            }