jQuery mouseenter / mousleave IE 10问题

Question

我使用jquery的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

对于临时解决方案，我将Mediaquery的ie10 +过渡设置为无。 这没有解决问题，但是对我来说是一个很好的解决方案。 也许有人对此协议感兴趣。

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