JSFiddle - React, Tailwind, and code Playground

HTML

<table  id="table">
<tr><td width="50%">
<div class="menu" id="dev">
<h1 class="title">Title1</h1>
<h2 class="helper">Helper 1</h2>
<h2 class="helper">Helper 2</h2>
</div>
</td><td>
<div class="menu" id="jav">
<h1 class="title">Title2</h1>
<h2 class="helper">Helper 1</h2>
<h2 class="helper">Helper 2</h2>
</div>
</td></tr>
</table>

CSS

html, body {
    height: 100%;
}

body {
    background: red;
}

h1, h2 {
    margin-bottom: 1em;
    background: white;
}

table { 
    width: 100%; 
}

JavaScript

$("body").mousedown(function() {
    var isHovered = !!$('.title, .helper').
                    filter(function() { return $(this).is(":hover"); }).length;
    
    if (isHovered)
         return;
    alert( 'triggered' );
});