Question

我正在为使用megamenu的drupal 7构建的网站制作主题css。

在IE 7/8/9（但不是IE10）中，当您将鼠标悬停在菜单项（元素）上时，它们具有蓝色背景，但我无法识别导致此样式的css规则以取消它。这个问题在drupal.org上标有截图（https://drupal.org/node/2106415），但还没有解决方案。

我梳理了megamenu模块css，并通过一些基于bootstrap的主题css，发现了很多样式，似乎将蓝色或“继承”背景应用于由各种悬停状态和/或活动父级选择的megamenu元素元素，复制这些选择器中的每一个，并尝试通过应用所有选择器来取消蓝色背景：

background-color: transparent !important;
background-image: none !important;
background: none !important;

没有成功。

绝望中我试过（#region-menu是我的megamenu所在的容器）

#region-menu a,
#region-menu a:active,
#region-menu a:hover,
#region-menu a:focus
{
    background-color: transparent !important;
    background-image: none !important;
    background: none !important;
}

这消除了IE7中的悬停状态蓝色背景，但没有在IE8 / 9中消失！

然后我试图强制IE调试器识别样式的来源。我试过这个伎俩： Is there a way to test CSS :hover in IE Developer tools? 但是当我得到展示的样式时，跟踪的样式显示我的上面的规则是活跃的，即使IE显示蓝色背景，而不是透明背景。

我完全失去了我的帽子给那些发现导致这种蓝色背景的人了！

Answer 1

导致不需要的蓝色背景的样式位于modules \ tb_megamenu \ css \ base.css第230和245行

只删除背景图像和颜色（就像我之前尝试过的那样）只适用于IE7。要删除IE8 / 9中的蓝色背景，您需要重置滤镜以删除渐变。

这为我修复了IE7 / 8/9：

.tb-megamenu .dropdown-menu li > a:hover,
.tb-megamenu .dropdown-menu li > a:focus,
.tb-megamenu .dropdown-submenu:hover > a ,
.tb-megamenu .dropdown-menu .active > a,
.tb-megamenu .dropdown-menu .active > a:hover
{
    background-color: transparent !important;
    background-image: none !important;
    filter: alpha(opacity=100);
}

Drupal megamenu：如何在IE8 / 9中悬停蓝色背景？

1 个答案: