css - 悬停问题与背景颜色 Slicknav 响应菜单

Question

我在使用 slicknav 响应式菜单时遇到问题，如果导航按钮在样式表中为悬停设置了不同的背景颜色，如果您将鼠标悬停在实际标签文本上，背景颜色会正确更改，但如果您将鼠标悬停在任何按钮的一部分远离文本，则实际文本后面的颜色不会改变。所以你会在原始颜色的文本周围得到一个相当难看的框。这在所有经过测试的浏览器中都会发生。

我找不到任何方法来阻止这种情况发生，css 文件并没有那么复杂。我现在在几个站点上使用 Slicknav 并且总是遇到同样的问题，但是这次我真的需要修复它。

您可以在此处查看示例:http://www.yorkluxuryholidays.co.uk/

在响应模式下，将鼠标悬停在具有子菜单的菜单项之一的任意位置，但不要直接悬停在菜单文本本身上，并且文本后面的区域不会改变颜色。

这是我用于悬停的 css:

.slicknav_nav .slicknav_item:hover {
background:#59584e;
color:#fff; }
.slicknav_nav a:hover{
background:#59584e;
color:#fff;}

无论是在哪个类上设置颜色似乎都没有区别，行为是完全相同的。

我很想知道是否有办法用 css 解决这个问题!

Answer 1

添加你的CSS:

.slicknav_nav a:hover * {
    color:#fff;
    background-color:#7b9fc7;
}