如何使眼睛在DIV外跟随鼠标

我正在尝试在我的网站头部添加跟踪鼠标的眼睛。我正在使用我找到的代码,这是我的 jsfiddle .我发现了很多关于鼠标后面某个对象的例子和帖子。但问题是,他们都只为他们所在的部门工作。为了证明这一点,我在示例中在眼睛周围添加了红线。当鼠标位于该框中时,眼睛会跟随所有鼠标移动。但是,如果鼠标滚动到框外,则不会再跟随鼠标。不管鼠标在页面上的哪个位置,有没有一种方法可以让眼睛跟随鼠标?

    <style>
    .move-area{/*normally use body*/
      width: 100vw;
      height: 100vh;
      padding: 10% 45%;
    }
    .container {
      width: 100%;
    }
    .eye {
      position: relative;
      display: inline-block;
      border-radius: 50%;
      height: 30px;
      width: 30px;
      background: #CCC;
    }
    .eye:after { /*pupil*/
      position: absolute;
      bottom: 17px;
      right: 10px;
      width: 10px;
      height: 10px;
      background: #000;
      border-radius: 50%;
      content: " ";
    }
    </style>

    <div style="height:200px;">
      <div class="move-area" style="height:30px;border:1px solid red;">
        <div class='.container'>
          <div class='eye'></div>
          <div class='eye'></div>
        </div>
      </div>
      <div>Text below the eyes</div>
    </div>

    <script>
    //This is a pen based off of Codewoofy's eyes follow mouse. It is just cleaned up, face removed, and then made to be a little more cartoony. https://codepen.io/Codewoofy/pen/VeBJEP

    $(".move-area").mousemove(function(event) {
      var eye = $(".eye");
      var x = (eye.offset().left) + (eye.width() / 2);
      var y = (eye.offset().top) + (eye.height() / 2);
      var rad = Math.atan2(event.pageX - x, event.pageY - y);
      var rot = (rad * (180 / Math.PI) * -1) + 180;
      eye.css({
        '-webkit-transform': 'rotate(' + rot + 'deg)',
        '-moz-transform': 'rotate(' + rot + 'deg)',
        '-ms-transform': 'rotate(' + rot + 'deg)',
        'transform': 'rotate(' + rot + 'deg)'
      });
    });
    </script>