0

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

在 IE 7/8/9（但不是 IE10）中，当您将鼠标悬停在菜单项（a 元素）上时，它们具有蓝色背景，但我无法识别导致此样式的 CSS 规则以将其取消。该问题已在 drupal.org 上通过屏幕截图 ( https://drupal.org/node/2106415 ) 进行标记，但尚无解决方案。

我梳理了 megamenu 模块 css 以及一些基于引导程序的主题 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 显示蓝色背景，而不是透明背景。

我完全不知所措，我向任何找出导致这种蓝色背景的原因的人致敬！

4

1 回答 1

0

导致不需要的蓝色背景的样式在 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);
}
于 2014-01-27T11:00:50.903 回答