Code to highlight selected area with CSS

Code to highlight selected area with CSS

Hello and happy 2019

What I want to achieve is to make "select to inspect" type of functionality, just like the browsers have. It should only have the functionality of creating a temporary element that will be overlayed over the element that my mouse is hovering on. 

I have created a screencast to show you what it should be like, and what I currently have.


This is my code written with jQuery
It creates a DIV on the page and then, on mousemove event, I set its values (height, width, and the position)
to be the same as the element that I am hovering on. But what I get is some glitchy windows when I hover over.

What am I missing here?

function create_div(){
let style = `
background-color: rgba(130, 180, 230, 0.5);
outline: solid 1px #0F4D9A;
box-sizing: border-box;
position: absolute;
display: block;
z-index: 999999;
`
let e = document. createElement( 'DIV')
e. setAttribute( 'id', 'tester')
e. setAttribute( 'style', style)
document. body. appendChild( e )
}
create_div()


$( "body" ). mousemove( function( event ) {
$( '#tester' ). css({ 'display' : 'none'})
let target = $( event. target )
$( '#tester' ). css({ 'display' : 'block', "width" : target. width(),
'height' : target . height(), 'top' : target . offset(). top,
'left' : target . offset(). left});
})