Javascript 如何在鼠标位置跟踪的父元素内移动子元素

我想做一只注视鼠标光标的眼睛。瞳孔不应离开“眼睛”边界
我已经创建了一些沙盒，其中显示了HTML标记的示例，但我没有一个公式来让这个动画工作

检查

我必须键入任何东西才能发布此消息 我们挑战的基础是HTML和CSS，它们构成了外星人的身体。 div被用来创建外星人的各个部分，包括怪物、身体、耳朵、嘴、牙齿和眼睛

<div class="ufo">
  <div class="monster" style="color: #7cb342">
    <div class="body">
      <div class="ear"></div>
      <div class="ear"></div>
      <div class="vampi-mouth">
        <div class="vampi-tooth"></div>
      </div>
    </div>
    <div class="eye-lid">
      <div class="eyes">
        <div class="eye"></div>
      </div>
    </div>
  </div>
</div>

检查

我必须键入任何东西才能发布此消息 我们挑战的基础是HTML和CSS，它们构成了外星人的身体。 div被用来创建外星人的各个部分，包括怪物、身体、耳朵、嘴、牙齿和眼睛

<div class="ufo">
  <div class="monster" style="color: #7cb342">
    <div class="body">
      <div class="ear"></div>
      <div class="ear"></div>
      <div class="vampi-mouth">
        <div class="vampi-tooth"></div>
      </div>
    </div>
    <div class="eye-lid">
      <div class="eyes">
        <div class="eye"></div>
      </div>
    </div>
  </div>
</div>

谢谢，但我以前看过这些帖子，主要区别在于：1）眼睛被做成圆形，而不是椭圆形，所以这意味着这个公式不起作用；2） 如果你把鼠标放在瞳孔上，它不会“看到”光标或眼睛，但我以前见过这些帖子，主要区别是：1）眼睛被做成圆形，而不是椭圆形，这意味着这个公式不起作用；2） 若你们把鼠标放在瞳孔上，它就不会看到光标