Hover-errors-one

HTML

<div id="hover">hoover me many times</div>
<div id="main">main</div>
<div id="alt">alt</div>

CSS

* {
    height:60px;
}
#hover {
    border: 1px solid black;
}
#main {
    background-color:red;
}
#alt {
    background-color:blue;
}

JavaScript

var $hover = $("#hover");
var $main = $("#main");
var $alt = $("#alt");

$alt.hide();

var timer = null;

$hover.on('mouseenter', function () {
    if (window.timer != null)
        clearTimeout(window.timer);
    
        $main.hide();
        $alt.show();
});

$hover.on('mouseout', function () {
    window.timer = setTimeout(function () {
        // Also attempted $main.is(":hidden")
        $alt.hide();
        $main.show();
    }, 3000);
});