鼠标移出:

鼠标移入:

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. [HEOI2014]平衡

    [HEOI2014]平衡 转化为求选择k个数,和为(n+1)*k的方案数 保证,每个数[1,2*n+1]且最多选择一次. 限制k个很小,所以用整数划分的第二种方法 f[i][j],用了i个,和为j 整 ...

  2. P1972 HHのnecklace 离线+树状数组

    此题莫队可过 然而太难了...... 我在胡雨菲那看的解法,然后自己打了一波,调了一个错,上交,自信AC. 做法:离线,对于L排序. 每种颜色可能出现很多次,那么我们如何不算重复呢? 只需把[L,n] ...

  3. 收藏:win32 控件之 sysLink控件(超链接)

    来源:https://blog.csdn.net/dai_jing/article/details/8683487 手动创建syslink(msdn): CreateWindowEx(, WC_LIN ...

  4. 第二十六篇-单击事件、Toast(提示框信息)

    单击事件有3种方法: 第一种: layout.xml <?xml version="1.0" encoding="utf-8"?> <Line ...

  5. Python--多线程、多进程常用概念

    一.常用概念 进程 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成. 线程 线程的出现是为了降低上下文切换的消耗,提高系统的并发性,并突破一个进程只能干 ...

  6. django基于存储在前端的token用户认证

    一.前提 首先是这个代码基于前后端分离的API,我们用了django的framework模块,帮助我们快速的编写restful规则的接口 前端token原理: 把(token=加密后的字符串,key= ...

  7. python 类的介绍实例

    使用面向对象的优点: 1.能够更好的设计软件架构 2.维护软件模块 3.易于架构和组件的重用 类的定义: 构造函数:初始化用,写不写都可以,默认为空 类属性:属于类的对象 方法属性:不属于类的对象 私 ...

  8. Unity 光照着色器

    光照着色器需要考虑光照的分类,一般分为漫反射和镜面反射. 漫反射计算基本光照: float brightness=dot(normal,lightDir)    将法线和光的入射方向进行点积运算,求出 ...

  9. JS学习笔记Day6

    一.数组 1.数组就是个容器,里面可以存放任意类型的数 2.定义数组:1)var arr = []: 2)var arr = new Array():构造函数定义方式,如果括号中有一个整数,该正数代表 ...

  10. php mkdir No such file or director问题

    有时使用mkdir创建目录时会出现 No such file or director这样的错误,导致这个错误的原是 比如你要创建目录 a\b\c目录,但是创建时父目录b也不存在时就会出现这样的问题. ...