Couleur d'arrière-plan collée dans Internet Explorer 11 - javascript, jquery, css, hover, internet-explorer-11

Au début, j'essayais de le faire:survoler un élément div changerait la couleur de fond. Je l'ai fait avec un simple CSS. Cela a fonctionné dans Chrome et certaines versions antérieures d’IE que j’ai vérifiées. Avec IE 11 cependant, lorsque ma souris a quitté la div, la couleur d’arrière-plan du survol y est restée.

Alors j'ai utilisé jQuery pour, en survol, ajouter une classeSurvolez et supprimez la classe sur Mouseleave (et dans le fichier CSS, j'ai associé la couleur de fond du survol à cette classe). J'ai utilisé console.log pour vérifier qu'il se trouvait bien dans ces parties, et elles y étaient, mais removeClass ("nom-classe") ne supprime pas réellement la classe dans IE 11 pour une raison quelconque.

J'ai essayé d'utiliser setClass et classList.remove / add aussi et je n'ai pas pu supprimer la classe ajoutée. Même si console.log a montré que j'étais dans le code qui ferait cela.

Alors j'ai essayé, au lieu d'ajouter / de supprimer unclasse, il suffit de changer la couleur de fond directement avec les événements de survol dans jQuery, comme $ ("div.target"). css ("background-color", "color"). Cela a fonctionné les deux premières fois. En stationnaire, la couleur d'arrière-plan a été modifiée, puis, elle est passée à l'autre couleur. Mais ensuite, je ne pouvais plus survoler la div pour que la couleur du survol revienne.

Des conseils ou des connaissances sur les bizarreries qui pourraient causer ces problèmes?

Réponses:

L'extrait suivant utilise JQuery mouseleave et mouseenter effectuer un background-color en changeant. Fonctionne avec IE 9+.

JSFiddle

HTML

<div class="myDiv myDiv-red">

</div>

CSS .myDiv { hauteur: 30px; largeur: 30px; }

.myDiv-red
{
background-color : red;
}

.myDiv-green
{
background-color : green;
}

JQuery

$(function() {
$(".myDiv").mouseenter(function() {
$(this).removeClass("myDiv-red").addClass("myDiv-green");
});

$(".myDiv").mouseleave(function() {
$(this).removeClass("myDiv-green").addClass("myDiv-red");
});
});