JSFiddle - React, Tailwind, and code Playground

HTML

<div class="from"><div class="box"></div></div>
<div class="target"></div>

<div class="comment">
    Click on the yellow box, it should move to the red box and flick back to yellow as the mouse is no longer hovering over this item, however in IE9 this is not the case using pseudo class :hover.<br/>
    This example uses JQuery hover which works but is not an elegant solution as this should not require JQuery to manage hover state.
</div>

CSS

.from {
    width: 100px;
    height: 100px;
    border: 1px solid blue;
    float: left;
}

.target {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    float: left;
    margin-left: 10px
}

.box {
    width: 80px;
    height: 80px;
    margin: 10px;
    background-color: yellow;
}
.box.hover {
    background-color: black;
}

.comment {
    font-family: sans-serif;
    font-size: 12px;
    clear: left;
    padding-top: 10px;
}

JavaScript

$(function() {
    $('.box').hover(function() {
        $(this).addClass('hover');
    }, function() {
        $(this).removeClass('hover');
    });
    $('.box').click(function() {
        $('.target').append($('.box').removeClass('hover'));
    });
});