我目前在我的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>
</>
);
}
将此添加到CSS的开头将产生您所要寻找的基本效果:
#app button:hover + .ball {
display: block;
}
.ball {
display: none;
}
这里的第一行假定.ball将在按钮之后立即添加到DOM中。
如果您希望球被剪辑在按钮内,您应该重新排列您的React脚本中的HTML,使.ball
div位于元素内,然后更新按钮的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;
}