JSFiddle - React, Tailwind, and code Playground

HTML

<div id="handler" class="box">
  <div class="content">
    <div class="card"> </div>
    <div class="card"> </div>
  </div>
  <div class="rect-outline"></div>
  <div class="rect-overlay"></div>
</div>

CSS

:root {
  --x: 150px;
  --y: 100px;
  --w: 300px;
  --h: 200px;
  --r: 10px;
}

body {
  margin: 0;
  overflow: hidden;
}

.box {
  position: relative;
  width: 600px;
  height: 400px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

.card {
  width: 100px;
  height: 100px;
  background: #f34573;
}

.card ~ .card {
  position: absolute;
  top: calc(var(--y) + 50px);
  left: calc(var(--x) + 50px);
}

.card:hover {
  background: #35b0ab;
}

.rect-outline {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  outline: 3000px solid rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.rect-overlay {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

JavaScript

const handler = document.querySelector('#handler')
const rect = handler.querySelector('.rect-overlay')

handler.addEventListener('mousemove', e => {
  const x = e.clientX
  const y = e.clientY

  if (x > 150 && x < 450 && y > 100 && y < 300) {
    rect.style.pointerEvents = 'none'
  } else {
    rect.style.pointerEvents = 'auto'
  }
}, false)