函数组件中监听鼠标移动到摸个div上面,同级别的div消失
时间: 2024-04-29 15:23:15 浏览: 8
可以使用useState来记录当前div是否应该显示,然后在鼠标移动到目标div上时更新状态,使得同级别的div消失。
下面是一个示例代码:
```
import React, { useState } from 'react';
function MyComponent() {
const [show, setShow] = useState(true);
const handleMouseEnter = () => {
setShow(false);
}
const handleMouseLeave = () => {
setShow(true);
}
return (
<div>
{show && <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>第一个div</div>}
{show && <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>第二个div</div>}
{show && <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>第三个div</div>}
{show && <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>第四个div</div>}
{show && <div onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>第五个div</div>}
</div>
);
}
export default MyComponent;
```
在这个例子中,初始状态下所有的div都会显示。当鼠标移动到任何一个div上时,所有同级别的div都会消失。当鼠标离开div时,所有同级别的div都会重新显示。