antd card 组件实现鼠标移入移出效果

鼠标移出：

鼠标移入：

import React, { Component } from 'react'

import { Card, Icon, Avatar } from 'antd';

const { Meta } = Card;

export default class Test extends Component{

    constructor(props){

        super(props)

        this.state={

            isenter:false

        }

    }

    MouseEnter() {

        setTimeout(() => {

            this.setState({

                isenter: true

            })

        }, 100)

    }

    MouseLeave() {

        setTimeout(() => {

            this.setState({

                isenter: false

            })

        }, 100)

    }

    render(){

        const isenter = this.state.isenter

        return(

            <div>

                <Card

                    hoverable

                    style={{ width: 300 }}

                    cover={<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />}

                    actions={isenter? [<a href='javascript:;'>编辑</a>, <a href='javascript:;'>新建</a>]:[<span>123</span>]}

                    onMouseEnter={this.MouseEnter.bind(this)}     //移入

                    onMouseLeave={this.MouseLeave.bind(this)}     //移出

                >

                    <Meta

                    title="title"

                    description="描述"

                    />

                </Card>

            </div>

        )

    }

}

antd card 组件实现鼠标移入移出效果的相关教程结束。