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>
        )
    }
}

 

转载于:https://www.cnblogs.com/aloehui/p/9014425.html