Bootstrap v3.2 nav-list - 悬停样式保持不变 - ie9

Question

所以我使用 bootstrap 在悬停在导航栏 link 上时生成悬停样式。在您使用 IE9 并且速度太快之前，此方法工作正常，即使不再悬停该项目，样式仍保持 "hovered"。

像这样，我可以在我的菜单中以 "hovered" 样式获得多个项目，这不应该发生。

我的代码：

<ul class="nav nav-list">
    <!-- ko foreach: router.activeItem().sidebar.links -->
       <li data-bind="visible: visible" class="special">
           <a data-bind="attr: { href: hash, title: title }"
              data-toggle="tooltip"
              data-placement="right">
                   <i class="menu-icon fa fa-5x" data-bind="css: icon"></i>
           </a>
        </li>
     <!-- /ko -->
 </ul>

错误：

我尝试了很多方法，比如添加另一个 class，如下所示：

.noHoverForThis {
color: inherit !important;
}

由于某些原因，这不起作用。同样覆盖整个 bootstrap class 对我不起作用，除非我努力写这个...

.navbar .nav-list > li:hover > a, 
.navbar .nav-list > li > a:hover {
    background-color: #e7e7e7 !important;
    color: inherit !important;
}

请记住，该错误仅出现在 IE9 中。

非常欢迎任何帮助！

编辑： 有趣的是：我正在使用 ACE 主题 www.wrapbootstrap.com

Answer 1

所以我终于想通了。

应该用于修复此问题并覆盖悬停状态的代码是：

.no-skin .nav-list > li:hover > a {
    background-color: rgb(248, 248, 248) !important;
    color: #585858 !important;
}

.nav-list > li::before {
    width: 0;
    height: 0;
    display: none;
}

然后包含在durandal的Index.cshtml中

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="../../Content/IEHacks.css" />
    <![endif]-->

这将使用 bootstrap v3.2

覆盖 ace 主题的悬停

Bootstrap v3.2 nav-list - 悬停样式保持不变 - ie9

Bootstrap v3.2 nav-list - hover style stays - ie9

css

twitter-bootstrap

twitter-bootstrap-2