Html 悬停时更改框内的文本颜色

所以现在自学html和CSS，我有一个小问题。在我的菜单栏中，我有一些列表项，当鼠标悬停在框上时，我想更改它们的颜色，但我不确定如何做到这一点。现在我有：

#Menu li:hover{
    background-color: rgba(255,165,0,0.5)
}

#Menu li a:hover{
    color: black;
}

但是当我将鼠标悬停在文本上时，它会发生变化，而只有框会发生变化。我试过：

#Menu li:hover{
    background-color: rgba(255,165,0,0.5)
    color: black;
}

但这除了改变盒子的颜色外什么都不做。还有一个渐进的变化而不是突然的变化也会很好

#菜单{
高度：40px；
背景色：rgb（255165,0）；
}
#菜单ul{
保证金：自动；
填充：0；
}
#菜单里{
列表样式类型：无；
浮动：左；
显示：块；
宽度：20%；
高度：40px；
文本对齐：居中；
线高：40px；
字体家族：继承；
字体大小：16px；
}
#菜单李a{
文字装饰：无；
颜色：白色；
位置：固定；
}
#菜单li：悬停{
背景色：#FFB733；
}
#菜单a：悬停{
颜色：黑色；
}

身体{
保证金：0；
}

参见示例

---

将鼠标悬停在项目框上时，项目会更改背景色和颜色，而不仅仅是文本。

尝试为

指定颜色。\n菜单li：将鼠标悬停在a

-

---

我修改了ASR的答案并添加了转换。CSS3有一些内置动画，不需要使用javascript或其他js库

#Menu li:hover {
    background-color: #FFB733;
    background: red;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
}

---

共享一个html示例。@flamencer如果打开

hover

你想更改文本颜色，你必须像

#菜单li:hover a{color:red；}

一样编写，这段代码意味着当

悬停在
li
上时，
锚定标记也会生效。查看演示。毫无疑问，这是有效的，因为我现在刚刚尝试过，但由于某种原因，它在我的手机里不起作用，我不知道为什么？在3个不同的浏览器中也尝试过。@Flamencer有时页面上的其他css代码可能会产生干扰。如果任何属性未生效，请尝试添加
！重要信息
，位于属性值的末尾。
#Menu li a:hover, #Menu li:hover a  {
    color: black;
}

#Menu li:hover {
    background-color: #FFB733;
    background: red;
    transition-property: background;
    transition-duration: 1s;
    transition-timing-function: linear;
}