如何在鼠標位置跟蹤的父元素內移動子元素

Question

我想制作一只觀察鼠標光標的眼睛。 眼睛的瞳孔不應該離開“眼睛”的邊界
我創建了一些沙箱，其中顯示了 HTML 標記的示例，但我沒有使此動畫正常工作的公式https://codesandbox.io/s/hardcore-butterfly-grwkz

Answer 1

檢查這個

我必須輸入任何東西來發布這個我們挑戰的基礎包括構建外星人身體的 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>