如何show/hide 鼠标悬停在antd 卡片中的额外部分？

Question

我在 react 项目中使用 antd 卡片。我想通过将鼠标悬停在卡片上来显示和隐藏卡片中的 extra 内容。

这是我的名片：

<Card
    title="My Card Title"
    extra={<Button type="link"> Download </Button>}
>
some content...
</Card>

我想在鼠标悬停卡片时显示 Download button。如何使用鼠标悬停控制 antd card 中 extra 部分的可见性？

Answer 1

首先，您需要 state 参加 show/hide 活动：

const [show, setShow] = useState(false);

其次，你应该做一个鼠标事件函数：

 const mouseHover = () => setShow(prev => !prev)

最后将此逻辑添加到您的卡片中，事件如下：

<Card
    title="My Card Title"
    extra={show ? <Button type="link"> Download </Button> : null}
    onMouseEnter={mouseHover}
    onMouseLeave={mouseHover}
>
some content...
</Card>

如何show/hide 鼠标悬停在antd 卡片中的额外部分？

How to show/hide extra section in antd card with mouse over?

reactjs

antd

mouseover

card