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

Question

我目前在我的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>
   </>
  );
}

Answer 1

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

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

.ball {
  display: none;
}

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

如果您希望球被剪辑在按钮内，您应该重新排列您的React脚本中的HTML，使.balldiv位于元素内，然后更新按钮的CSS（由于球被包含在按钮内，您实际上不需要上面的CSS行，但如果保留它们，只需删除“+”号即可）。

JS中的更新部分：

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

CSS中的更新部分：

button{
  background-color: green;
  padding: 20px;
  position: relative;
  overflow: hidden;
}