Allow pointer-events only on one element

Question

I have two elements that are siblings

<div id='1'></div>
<div id='2'></div>

id 1 id is an area around an element that I have highlighted and id 2 is an overlay over the whole page. Is there a way to make a "window" where the are of id 1 is clickable but everything else is not?

I don't need to use both element I just need the area outside of id 1 to be clickable. The id 1 is not the element It's just and area that is sibling to parent of the element used to highlight elements on my page and move it around.

Another way to explain is to create an element give it outline and make the outline not clickable trough, I can make the outline bigger then the page and the only thing clickable will be the element.

Answer 1

For a CSS only solution, i believe correct z-index configuration would adequately resolve your issue.

 #one { background: red; position: absolute; z-index: 1; width: 50px; height: 50px; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; } #two { position: fixed; top: 0; left: 0; width: 100vw; height: 100vw; background-color: black; pointer-events: none; }

A working example can be found in the following link

https://stackblitz.com/edit/js-ajhv9c?file=style.css

Answer 2

1 will change the color when you hover

2 won't

 #one { pointer-events: auto; } #one:hover { color: red; } #two { pointer-events: none; } #two:hover { color: red; }

 <div id="one">1</div> <div id="two">2</div>