Mousefollower 未将鼠标悬停在其他组件上

问：

我使用 mousefollower 将鼠标悬停在我的目标网页上，但当我向下滚动并悬停在其他组件上时，它不会悬停。它只从顶部停留到 100vh，但当我向下滚动并将鼠标悬停在其他组件上时不会出现。

这是 App.js

import { useContext, useEffect, useState } from 'react';
import './App.css';
import About from './components/About';
import Footer from './components/Footer';
import MainFooter from './components/MainFooter';
import Navbar from './components/Navbar';
import Secondpart from './components/SecondPart';
import ArrowOutwardIcon from '@mui/icons-material/ArrowOutward';
import AuthContext, { AuthProvider } from './context/Context';




function App() {




  const { handleMouseMove,position } = useContext(AuthContext)

  return (
    <div className="App" id='App'  >
      <div
        className="follower-circle"
        style={{
          transform: `translate(${position.x + 10}px, ${position.y - 10}px)})`,
        }}
      ></div>
      <div className="home" onMouseMove={handleMouseMove} >

        <Navbar />

        <MainFooter />

        <Secondpart />

        <About />

        <Footer />

      </div>
    </div>
  );
}

export default App;

这是上下文.js

import React, { createContext, useState, useEffect } from 'react'
// import { useNavigate } from 'react-router-dom';
import gsap from 'gsap';


const AuthContext = createContext();


export default AuthContext;




export const AuthProvider = ({ children }) => {


    const [position, setPosition] = useState({ x: 0, y: 0 });
    const [loadingEffect, SetLoadingEffect] = useState(true)


    const handleMouseMove = (e) => {
        setPosition({ x: e.clientX, y: e.clientY });
    };


    useEffect(() => {
        (
            async () => {
                const LocomotiveScroll = (await import('locomotive-scroll')).default;
                const locomotiveScroll = new LocomotiveScroll();
            }
        )()
        const timerId = setInterval(() => {
            SetLoadingEffect(false);
        }, 700); // Run the interval every 1000ms (1 second)

        // Clean up the timer when the component unmounts
        return () => {
            clearInterval(timerId);
        };
    }, [])



    return (
        <AuthContext.Provider value={{
            handleMouseMove: handleMouseMove, position: position, setPosition: setPosition,
        }}>
            {children}
        </AuthContext.Provider>
    )
}

组件之一（footer.js）：

import React, { useContext } from 'react'
import AuthContext from '../context/Context'

export default function Footer() {

    const { handleMouseMove } = useContext(AuthContext)

    return (
        <section className="footer">
            <div className="footerLeft">
                <p>2023©</p>
                <p>2.30 PM EST</p>
            </div>
            <div className="footerRight">
                <a href="https://www.linkedin.com/in/naimur-sharon-23b400260">Linkedin</a>
                <a href="https://www.facebook.com/naimur.saron">Facebook</a>
                <a href="https://www.instagram.com/naimursharon/">Instagram</a>
            </div>
        </section>
    )
}

Mousefollower CSS：

.home {
  position: relative;
  color: #fff;
}
.follower-circle {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.35s;
}
}