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});
})