jquery mouseenter/mousleave IE 10 problèmes

Question

J'ai utilisé jquerys mouseenter/mousleave pour créer une navigation. Fonctionne bien sous tous les navigateurs sauf 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/

Howerver dans IE10 le texte et l'image se chevauchent lorsque vous passez la souris sur les éléments de navigation.

Je n'ai pas trouvé de solution, mais cela ne semble pas être un problème avec mon css.

Answer 1

Pour une solution temporaire, définissez la transition avec Mediaquery pour ie10 + sur none. Cela n'a pas résolu le problème, mais c'est une bonne solution pour moi. Peut-être que quelqu'un d'autre est intéressé par cet accord.

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