jquery mouseenter / mousleave IE 10 issues

Question

我使用 jquerys mouseenter/mousleave 来创建导航。在除IE 10以外的所有浏览器下都可以正常工作。

  $(".menu-item a").on("mouseenter", function() {
    "use strict";
      $(this).next(".menu-adds").children().addClass("active");
      $(".current_page_item").children(".menu-adds").children().removeClass("active");
  });

  $(".menu-item a").on("mouseleave", function() {
    "use strict";
      $(this).next(".menu-adds").children().removeClass("active");
      $(".current_page_item").children(".menu-adds").children().addClass("active");
  });

https://jsfiddle.net/a8omouec/2/

在

IE10 中，将鼠标悬停在导航项上时，文本和图像会重叠。

没有找到解决方案，但这似乎不是我的 css 的问题。

Answer 1

对于临时解决方案，我将 ie10+ 的 Mediaquery 过渡设置为无。这并没有解决问题，但这对我来说是一个很好的解决方案。也许还有其他人参与了这个协议。

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    span.menu-image.active,
    span.menu-description.active {
            transition: none;
    }
}

https://jsfiddle.net/a8omouec/4/