提问者:小点点

元素仅在悬停在按钮上时跟随光标


我目前在我的React项目中有一个圆球跟随光标。但是,我希望它只出现在光标悬停在按钮上的时候,而不是其他的。

有没有办法做到这一点?

这是密码本

let mouseX = 0
let mouseY = 0
let ballX = 0
let ballY = 0
let speed = 0.2

const Page = () => {

const ballRef = React.useRef(null)


  const animate = React.useCallback(() => {

    if (ballRef && ballRef.current) {
      let distX = mouseX - ballX
      let distY = mouseY - ballY
      ballX = ballX + distX * speed
      ballY = ballY + distY * speed
      ballRef.current.style.left = ballX + "px"
      ballRef.current.style.top = ballY + "px"
    }

    requestAnimationFrame(animate)
  }, [ballRef, mouseX, mouseY, ballX, ballY])

  React.useEffect(() => {
    const onMouseMove = event => {
      mouseX = event.pageX
      mouseY = event.pageY
    }

    document.addEventListener("mousemove", onMouseMove)

    animate()

    return () => document.removeEventListener("mousemove", onMouseMove)
  }, [])  

 return (
   <>
     <button>BUTTON</button>
     <div ref={ballRef} className="ball"></div>
     <div class="divs"></div>
     <div class="divs"></div>
   </>
  );
}

共1个答案

匿名用户

将此添加到CSS的开头将产生您所要寻找的基本效果:

#app button:hover + .ball {
  display: block;
}

.ball {
  display: none;
}

这里的第一行假定.ball将在按钮之后立即添加到DOM中。

如果您希望球被剪辑在按钮内,您应该重新排列您的React脚本中的HTML,使.balldiv位于