鼠标移出:

鼠标移入:

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 组件实现鼠标移入移出效果的更多相关文章

  1. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  2. CSS3的过渡效果,使用transition实现鼠标移入/移出效果

    在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...

  3. # li鼠标移入移出,点击,变背景色,变checkbox选中状态

    移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...

  4. div展现与收起效果(鼠标移入移出)

    效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  5. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  6. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  7. Vue中通过鼠标移入移出来添加或取消class样式(active)

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  8. 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

随机推荐

  1. HDU/HDOJ 4864 Task

    贪心题. 贪心方法很是naive...... 首先我们就能注意到一个性质:优先选择时间(x)长的,然后才是等级(y). 所以我们把机器和任务排好序,从大到小枚举任务.对于每一个x满足的机器,x也一定满 ...

  2. bcftools合并vcf文件

    见命令: bcftools merge A.vcf.gz B.vcf.gz C.vcf.gz -Oz -o ABC.vcf.gz 参考链接:http://vcftools.sourceforge.ne ...

  3. firfox中"content-disposition", "attachment;filename=“+filename不能显示文件名字

    一般要在浏览器中显示文件名,可以使用以下文件名 // 设置文件名的编码方式,使得文件的名字能够正常安全的显示. filename = URLEncoder.encode(filename, " ...

  4. java equals和hashcode方法

    equals()方法比较两个对象的引用是否相同 hashcode()方法比较两个对象的哈希码是否相同

  5. (链表 双指针) leetcode 141. Linked List Cycle

    Given a linked list, determine if it has a cycle in it. To represent a cycle in the given linked lis ...

  6. (DFS)P1605 迷宫 洛谷

    题目背景 迷宫 [问题描述] 给定一个N*M方格的迷宫,迷宫里有T处障碍,障碍处不可通过.给定起点坐标和 终点坐标,问: 每个方格最多经过1次,有多少种从起点坐标到终点坐标的方案.在迷宫 中移动有上下 ...

  7. cookie猜数字游戏(上)---------------思路分析(踩坑)

    说明:用户第一次请求页面的时候,同时会产生一个随机数,用户点提交表单的时候,会将输入的数字与第一次请求产生的数字进行一个对比. 问题一:如何保存用户每次提交的数据 我们常见的在服务器中保存数据的方式是 ...

  8. Hadoop生态圈-构建企业级平台安全方案

    Hadoop生态圈-构建企业级平台安全方案 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 能看到这篇文章的小伙伴,估计你对大数据集群的部署对于你来说应该是手到擒来了吧.我之前分享过 ...

  9. centos 6 与 centos 7 服务开机启动、关闭设置的方法

    简单说明下 centos 6 与 centos 7 服务开机启动.关闭设置的方法: centos 6 :使用chkconfig命令即可. 我们以apache服务为例: #chkconfig --add ...

  10. STM32学习笔记:【004】USART串口通信

    版本:STM32F429 Hal库v1.10 串口通信能够实现两块电路之间不同的通信,在开发中作为打印调试也是一门利器(printf重定向). 补充一点小知识: 1. weak修饰符修饰的函数,说明这 ...