Klikanie w tle w programie Internet Explorer 11 - javascript, jquery, css, hover, internet-explorer-11

Na początku próbowałem to zrobić tak:najechanie kursorem na element div zmieniłoby kolor tła. Zrobiłem to za pomocą prostego CSS. Działa w Chrome i niektórych wcześniejszych wersjach IE, które sprawdziłem. Jednak w IE 11, kiedy moja mysz opuszcza div, kolor tła najechania pozostał tam.

Więc użyłem jQuery, aby po najechaniu kursorem dodać klasępo najechaniu myszką i usunę klasę po kliknięciu myszką (w pliku CSS skojarzyłem kolor tła najechania myszą z tą klasą). Użyłem console.log, aby sprawdzić, czy jest w tych częściach poprawnie, i tam były, ale removeClass („nazwa-klasy”) po prostu nie usuwa klasy z IE 11 z jakiegoś powodu.

Próbowałem też użyć setClass i classList.remove / add, ale nie mogłem usunąć dodanej klasy. Mimo że console.log pokazało, że jestem w kodzie, który by to zrobił.

Więc wtedy próbowałem, zamiast dodawać / usuwaćklasy, wystarczy zmienić kolor tła bezpośrednio za pomocą zdarzeń aktywowania w jQuery, takich jak $ („div.target”). css („kolor tła”, „kolor”). Działało to dwa razy. Po najechaniu kursorem zmienił się na kolor tła dymka, a następnie wyszedł, zmienił się na inny kolor. Ale potem nie mogłem ponownie najechać kursorem na div, aby wrócić do tego koloru.

Wszelkie wskazówki lub wiedza na temat dziwactw, które mogą powodować te problemy?

Odpowiedzi:

Poniższy fragment używa JQuery mouseleave i mouseenter wykonać background-color wymiana pieniędzy. Działa z IE 9+.

JSFiddle

HTML

<div class="myDiv myDiv-red">

</div>

CSS .myDiv { wysokość: 30 pikseli; szerokość: 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");
});
});