a：悬停更改列表项的背景

Question

我想让a:hover更改列表项的背景。

我目前使用的方法只更改文本后面的直接背景颜色，而不是为该列表项指定的整个空间（padding:15px 55px 15px 55px;）。

如何使用分配给该列表项的完整空间更改a:hover属性以更改背景颜色？

CSS：

 #navbar{
        background:#303030;
    }

#navbar li{
    display:inline-block;
    list-style:none;
    padding:15px 55px 15px 55px;
    font-weight:normal;
    font-family: 'Lora', serif;

}
#navbar a{
color:#F5F5F5;
}

#navbar a:hover{
background-color:#EE7621;
}

Answer 1

为什么不将你的悬停设置在li：

上

#navbar li:hover{
background-color:#EE7621;
}

编辑：

正如thirtydot所建议的那样：

“理想情况下，你的元素应占用li元素的整个空间。尝试添加display：inline-block;或display：block to a a and the padding from li to a”