JSFiddle - React, Tailwind, and code Playground

by andrey90vs

HTML

<div id="center">
    <h1>Text text text</h1>
</div>
<button id='btn'>CTRL + hover</button>

CSS

#center {
    visibility:hidden;
}

JavaScript

$(document).ready(function() {
    $(document).focus();
    var keyPressed = false;
    var mouseovered = false;
    $("#btn").mouseover(function(e) {
        doStuff();
        mouseovered = true;
    });
    $("#btn").mouseout(function() {
        doStuff();
        mouseovered = false;
    });
    $(document).keydown(function(e) {
        doStuff();
        if (e.ctrlKey) {
            keyPressed = true;
        } else keyPressed = false;
    });
    
    $(document).keyup(function(e) {
        
        if (keyPressed) {
            keyPressed = false;
        }
        doStuff();
    });
    
    function doStuff() {
        if (mouseovered && keyPressed) $("#center").css({
            "visibility": "visible"
        });
        else $("#center").css({
            "visibility": "hidden"
        });
    }
});