CSS 在悬停时更改链接背景

Question

我想让我的链接背景在悬停时改变颜色。我知道有很多论坛，但不知何故，我检查了几个论坛。我想我确实理解逻辑，但不知何故，当我尝试将其实现到我的网站上时，我不知何故无法让它工作。只有链接的背景改变了颜色，而不是整个 li 改变了。

    div.panel.widget.widget_nav_menu {width: 100%; background-color: #EBDDE2;}
    div.panel.widget.widget_nav_menu ul {width: 100%; list-style-type: none;}
    div.panel.widget.widget_nav_menu a {width: 100%; margin-left: 25px;}
    div.panel.widget.widget_nav_menu a:hover {background-color: #EFE4E8;}

有人能帮我一把我所缺少的吗？这是导航所在位置的链接 Beaucare-clinical-Faced。

Answer 1

您可以

尝试将链接的display属性从inline（这是默认值）更改为block。然后，链接应占据其容器对象的整个宽度（在本例中为 li ）。例如：

widget_nav_menu a {
    display: block;
    padding-left: 25%;
}

这种方法比更改li的颜色略好，因为人们希望更改颜色的整个区域都是可点击的。

此外，您的CSS选择器也没有必要如此具体。如果您删除div.panel.widget它们应该仍然可以正常工作。

Answer 2

而不是 Trgeting "anchor" 标签，目标为 LI

检查这个

 div.panel.widget.widget_nav_menu {width: 100%; background-color: #EBDDE2;}
    div.panel.widget.widget_nav_menu ul {width: 100%; list-style-type: none;}
    div.panel.widget.widget_nav_menu a {width: 100%; margin-left: 25px;}
    div.panel.widget.widget_nav_menu li:hover {background-color: #EFE4E8;}