如何让视频上的声音切换按钮随光标在视频框内移动且可点击？

核心修改思路 #

要让按钮跟随光标移动，需给按钮设置绝对定位，并通过监听视频容器内的鼠标移动事件，实时更新按钮的位置坐标。

完整代码实现 #

<!DOCTYPE html>
<html>
<head>
  <style>
    .video-container {
      position: relative; /* 作为按钮定位的参考容器 */
      width: 800px; /* 根据你的视频实际尺寸调整 */
      height: 450px;
      overflow: hidden; /* 限制按钮不会移出视频容器 */
      background: #000; /* 模拟视频背景，可替换为实际视频 */
    }

    .magic-hover.magic-hover__square {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 10; /* 确保按钮在视频上方，可正常点击 */
      margin: 0;
      padding: 8px 16px;
      border: none;
      border-radius: 4px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      cursor: pointer;
      transition: opacity 0.2s; /* 光标移出时的平滑隐藏效果 */
    }
  </style>
</head>
<body>
  <div class="video-container">
    <!-- 替换为你的自动播放视频元素 -->
    <!-- <video autoplay muted src="your-video-source.mp4" width="800" height="450"></video> -->
    <button class="magic-hover magic-hover__square">Toggle Sound</button>
  </div>

  <script type="text/javascript" src="https://res.cloudinary.com/veseylab/raw/upload/v1684982764/magicmouse-2.0.0.cdn.min.js"></script>

  <script>
    // 初始化magicMouse光标效果
    const options = {
      "cursorOuter": "circle-basic",
      "hoverEffect": "circle-move",
      "hoverItemMove": false,
      "defaultCursor": true,
      "outerWidth": 40,
      "outerHeight": 40
    };
    magicMouse(options);

    // 实现按钮跟随光标逻辑
    const videoContainer = document.querySelector('.video-container');
    const toggleBtn = document.querySelector('.magic-hover.magic-hover__square');

    videoContainer.addEventListener('mousemove', (e) => {
      // 获取视频容器的位置信息，计算光标在容器内的相对坐标
      const containerRect = videoContainer.getBoundingClientRect();
      const relativeX = e.clientX - containerRect.left;
      const relativeY = e.clientY - containerRect.top;

      // 让按钮中心对齐光标（可根据需求调整偏移量）
      const btnHalfWidth = toggleBtn.offsetWidth / 2;
      const btnHalfHeight = toggleBtn.offsetHeight / 2;
      toggleBtn.style.left = `${relativeX - btnHalfWidth}px`;
      toggleBtn.style.top = `${relativeY - btnHalfHeight}px`;
    });

    // 光标移出视频容器时隐藏按钮，移入时显示
    videoContainer.addEventListener('mouseleave', () => {
      toggleBtn.style.opacity = '0';
    });
    videoContainer.addEventListener('mouseenter', () => {
      toggleBtn.style.opacity = '1';
    });
  </script>
</body>
</html>

关键细节说明 #

• 容器定位参考：给视频容器设置position: relative，确保按钮的绝对定位以容器为基准，不会超出视频区域。
• 坐标计算：通过getBoundingClientRect()获取容器的页面位置，计算光标在容器内的相对坐标，避免页面滚动导致的位置偏差。
• 可点击性保证：设置z-index: 10让按钮层级高于视频，确保点击事件能正常触发。
• 视觉优化：添加transition实现光标移出时的平滑隐藏效果，让交互更自然。

内容的提问来源于stack exchange，提问作者caremission