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.
</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; 
    background-position: 0 0;
    zoom: 1;
}

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

JavaScript

$(function() {
    $('.box').click(function() {
        $('.target').append( $(this).clone() );
        $(this).remove();
    });
});