clip mask

clip-mask.html

<button onclick="alert('click')">Button1</button>
<button onclick="alert('button2')">Button2</button>
<div class="clip-mask" data-role="clip-mask"></div>

clip-mask.js

var timeId = 0
var mask = document.querySelector('[data-role="clip-mask"]')
var width = mask.clientWidth
var height = mask.clientHeight
var offset = {
  top: mask.offsetTop,
  left: mask.offsetLeft
}

document.addEventListener('mousemove', function (e) {
  clearTimeout(timeId)
  timeId = setTimeout(function() {
    
    var x = e.clientX
    var y = e.clientY
    
    // check mouse is inside
    if (x > offset.left &&
        x <= offset.left + width &&
        y > offset.top &&
        y <= offset.top + height
     ) {
      mask.classList.add('no-events')
    } else {
      mask.classList.remove('no-events')
    }
    
  }, 150)
})

clip-mask.scss

body {
  padding: 0;
  margin: 0;
}

button {
  width: 100px;
  height: 40px;
  border: 1px solid #6cbdf3;
  background: #6cbdf3;
  border-radius: 3px;
  margin: 100px;
  font-size: 16px;
  font-weight: lighter;
  color: #fff;
  cursor: pointer;
  outline: none;
  
  &:hover {
    opacity: 0.9;
  }
}

.clip-mask {
  position: fixed;
  left: 75px;
  top: 70px;
  z-index: 1;
  width: 150px;
  height: 100px;
  background: transparent;
  // pointer-events: none;
  border-radius: 50%;
  box-shadow: 0 0 0 5000px rgba(#000, .5);
  
  &.no-events {
    pointer-events: none;
  }
  
  &::before {
    content: "";
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}