JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
SYDNEY (Reuters) - An Australian man had his driving licence suspended for 10 months and was fined after he was caught driving a scooter made of a motorised beer cooler capable of carrying several dozen drinks -- after knocking back a few.
</div>
<div id="output">
</div>
<div id="onTop">
<!-- I'm always on top -->
</div>
CSS
#content {
background-color:#cccc99;
}
#onTop {
position:absolute;
width: 100px;
height: 50px;
left: 100px;
top: 10px;
background-color: #cccccc;
}
JavaScript
$(function() {
var output = $("#output");
var content = $("#content");
var eventSource = $("<div></div>");
$("body").append(eventSource);
eventSource.css({
position: "absolute",
left: content.offset().left,
top: content.offset().top,
width: content.width(),
height: content.height(),
opacity: 0,
"z-index": 999,
}).mouseenter(function(e){
output.text("I'm in!");
}).mouseout(function(e) {
output.text("I'm out!");
});
});