Question

我想建立我的链接＆＃39;悬停时背景会改变颜色。我知道有很多论坛，但不知怎的，我已经检查了几个论坛。我想我确实理解了逻辑但不知怎的当我尝试将它实现到我的网站时，我无法让它工作。只有链接的背景会改变颜色而不是整个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-facial。

Answer 1

而不是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;}

Answer 2

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

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

这种方法略好于改变li的颜色，因为人们期望改变颜色的整个区域是可点击的。

此外，您的CSS选择器并不需要如此具体。如果您删除div.panel.widget，那么它们仍然可以正常工作。

css在悬停时更改链接背景

2 个答案: