<div class="header">
  <p class="tags"> <span>html</span> &nbsp <span>css</span> </p>
  <h2>Как сделать прямоугольную дырку в диве?</h2>
  <p class="ask">
    Здравствуйте! Есть див, который перекрывает всё содержимое сайта полупрозрачным черным цветом. Как сделать прямоугольное "окно" в диве, если известны top, left, right, bottom? Т.е. чтобы содержимое сайта в "окне" отображалось естественным цветом.
  </p>
</div>

<div class="question">
  <div class="user">Ответ от Максим Ленский</div>
  <div class="ques">
  Это примерно так ...надо иметь в разметке блок который будет рядом с блоком <br>который может иметь на него влияние либо вызывать событие mousemove на javascript
</div>
  <div class="overlay"></div>
  <div class="code">
    <textarea>
<div class="tutor"></div>
<style>
  div.tutor {
      position:fixed;
      z-index:500;
      width:100%;
      height:100%;
      top:0;
      left:0;
      background-color:#000;
      opacity:0.7;
    } 
</style>
    </textarea>
  </div>
</div>

.tags span{
  display: inline-block;
  border: 1px solid #000;
  border-bottom: 1px solid blue;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.ask{
  padding: 16px 30px;
}

.user{
  font-size: 12px;
  margin-bottom: 20px;
}

.code{
  width: 400px;
  height: 240px;
  bacground: #fff;
  position: relative;
  z-index: 100;
}

textarea{
  display: block;
  width: 100%;
  min-height: 100%;
}

.overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,0.0);
  visibility: hidden;
  z-index: 10;
}

.question:hover .overlay{
  visibility: visible;
  background: rgba(0,0,0,0.8);
}

.ques{
  padding: 10px 30px 30px;
}