JSFiddle - React, Tailwind, and code Playground

by mathheadinclouds

HTML

mouse over the box <br/>
note how .is(":hover") works in jQuery prior to 1.9<br/>
but not in 1.9.1, so here's a work around <br/> <br/>
THIS IS NOT ABOUT PERFORMING AN ACTION ON HOVER - FOR THAT, JUST USE .hover()<br/>
THIS IS ABOUT, AT AN ARBITRARY POINT IN TIME, FINDING OUT WHETHER OR NOT
SOME ELEMENT IS BEING HOVERED
<br/> <br/>
use workaround for jQuery 1.9
<input type="checkbox" id="workaround"/>
<div id="theBox">
</div>
other workaround (thanks Mooseman)
<div id="info"></div>

CSS

#theBox {
    width:200px;
    height:200px;
    background: #aaa;
}

JavaScript

function mouseIsOver(what){
    return $(what).is(":hover");
}
function mouseIsOverWorkaround(what){
    var temp = $(what).parent().find(":hover");
    return temp.length == 1 && temp[0] == what;
}
function mo(what){
    return document.getElementById("workaround").checked ? mouseIsOverWorkaround(what) : mouseIsOver(what);
}
setInterval(function(){
    $("#info").html($("#theBox:hover").length ? "hovered" : "not hovered");
    var theBox = $("#theBox");
    if(mo(theBox[0])) {
       theBox.css("background", "yellow");
    }
    else {
       theBox.css("background", "");
    }
}, 200);