JSFiddle - React, Tailwind, and code Playground

by NinjaFish

HTML

<!-- The <div> wrapper serves to push the SVG block away from
     the corner of its window; the default contains() implementation
     appears to work when comparing to iframes. -->
<p>I don't change color on hover in IE9.</p>
<div id="broken">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="20" height="20">
        <rect width="20" height="20"></rect>
    </svg>
</div>

CSS

div {
    padding: 0.5em;
    width: 20px;
    height: 20px;
}

rect {
    fill: #0000ff;
}

.hover {
    fill: #ff0000;
}

p {
    padding: 0.5em 0 0 0.5em;
    font-size: 90%;
    font-family: sans-serif;
}

JavaScript

(function() {
    // Uncommenting the following override will allow the correct hover behavior in IE9.
//    $.contains = function(a, b) {
//        return a !== b && (a.contains ? a.contains(b) : a.compareDocumentPosition ? !! (a.compareDocumentPosition(b) & 16) : true);
//    };

    $(document).ready(function() {
        $("#broken rect").on("mouseenter mouseleave", function(e) {
            if (e.type == "mouseenter") {
                $(this).attr("class", "hover");
            }
            else if (e.type == "mouseleave") {
                $(this).attr("class", "");
            }
        });
    });
})();