Search code examples
reactjsantdmouseovercard

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

I am using antd cards in my react project. I want to show and hide extra content in my card with mouse hover on the card.

this is my card:

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

I want to show Download button just when the mouse hover the card. How can I control the visibility of extra section in antd card with mouseover?

Solution

  • First, You need an state for show/hide event:

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

    Second, you should make an mouse event function:

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

    And finally add this logic into your card with events like this:

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