Question

我有http://camerabeanbags.co.uk/test这个网站并且在顶部导航菜单上，您可以看到当您将鼠标悬停在菜单上的文本上时，文本后面会显示灰色背景。

我可以使用哪些CSS代码将灰色背景显示在活动页面后面？因此，如果我在主页上，则菜单上的主页文本后面会显示灰色背景？

谢谢，

哈维

Answer 1

您可以使用：

li.current-menu-item:hover > a {
  background: #e8e8e8;
}

Answer 2

无需在代码中添加背景或任何内容。

li.current-menu-item a,
nav a:active,
nav a:focus {
  color: #406639 !important;
}
li.current-menu-item a:before,
nav a:active:before,
nav a:focus:before {
    transform: scaleX(1);
}

这将触发您用于悬停状态的默认样式。

编辑：我已经更新了你需要的全部答案。 :) 请注意，我必须添加重要信息，因为您对此选择器很重要：

a:focus {
 color: #c9c9c9 !important;
 text-decoration: none;
}

Answer 3

正如我可以看到你使用::之前作为悬停的背景效果...要使其处于活动状态，你可以使用：

nav li.active a:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background: #e8e8e8;
transform: scaleX(0);
transition: transform .25s;}

另外，需要添加带有li

的活动类

CSS更改活动导航菜单页面的设置背景

3 个答案: