Why is mouseout event called when focus changes?

HTML

<div id="button">button</div>

<div id="overlay">Overlay</div>

<div id="log"></div>

CSS

#button {
    z-index: 1;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAeCAMAAABHRo19AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMAUExURQB/Dv/YAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAI/RtdIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAFlJREFUSEvty7ENhEAAxMCj/6Y/mdCrFyJDTGyf64Fvvumbb3rlfP6QNc0ka5pJ1jSTrGkmWdNMsqaZZE0zyZpmkjXNJGuaSdY0k6xpJlnTTLKmmWRN0875AZSRBRk8J+FnAAAAAElFTkSuQmCC) no-repeat left top;
    display: inline-block;
    position: relative;
    left: 0px;
    top: 0px;
    width: 60px;
    height: 30px;
}

#overlay {
    z-index: 3;
    display: none;
    position: absolute;
    left: 30px;
    top: 15px;
    width: 60px;
    height: 60px;
    background-color: blue;
}

#log {
    position: absolute;
    left: 0px;
    top: 200px;
    border: 1px solid black;
}

JavaScript

$( '#button' ).on( 'click', function(e) {
    $( '#overlay' ).show();
    log( document.activeElement + ' has the focus' );
});
                  
$( '#button' ).on( 'mouseout', function(e) {
    log( 'target: ' + e.relatedTarget.id );
    log( 'why are you mousing out?' );
});

var log = function(entry) {
    $( '#log' ).append( entry + '<br/>' );
};