html - css 在悬停时更改链接背景

Question

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

    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-facial导航的位置。

Answer 1

您可以尝试将链接的 display 属性从 inline(默认)更改为 block。然后链接应该占据其容器对象的整个宽度(在本例中为 li)。例如:

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

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

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