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

Question

So I am using bootstrap to generate a hover style when hovering over a navbar link. This works fine until you use IE9 and are too fast, the style stays "hovered", even when not hovering the item anymore.

Like this I can get multiple items in my menu in the "hovered" style which shouldn't be happening.

My code:

<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>

The bug:

I have tried alot of things like adding another class like this:

.noHoverForThis {
color: inherit !important;
}

This does not work for some reason. Same for overriding the whole bootstrap class didn't work for me, unless I failed hard writing this...

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

Keep in mind the bug only occurs in IE9.

Any help would be very welcome!

EDIT: Interesting to know: I am using ACE Theme www.wrapbootstrap.com

Answer 1

So I finally figured it out.

The code that should be used to fix this issue and override the hover state is:

.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;
}

And then include it in the Index.cshtml of durandal

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

This will override the hover of the ace theme using bootstrap v3.2