鼠标移出:

鼠标移入:

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. 什么是Zookeeper?

    https://mp.weixin.qq.com/s?__biz=MzAxOTc0NzExNg==&mid=2665514106&idx=1&sn=e54aae8cf68f5a ...

  2. hdu 3530 "Subsequence" (单调队列)

    传送门 题意: 给出一个序列,求最长的连续子序列,使得 m ≤ Max-Min ≤ k 我的理解: 定义数组 a[] 存储输入的 n 个数: 定义两个双端队列: deque<int >qM ...

  3. (数字三角形)POJ1163 The Triangle

    The Triangle Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 59698   Accepted: 35792 De ...

  4. 谈.Net委托与线程——创建无阻塞的异步调用(一)

    前言 本文大部分内容来自于mikeperetz的Asynchronous Method Invocation及本人的一些个人体会所得,希望对你有所帮助.原英文文献可以在codeproject中搜索到. ...

  5. CodeForces121E 线段树上线段果

    http://codeforces.com/problemset/problem/121/E 题意: Petya 喜欢幸运数,幸运数只包含 4 和 7 这两个数字.例如 47,744,4 都是幸运数字 ...

  6. 剑指Offer_编程题_1

    题目描述 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数.   class Sol ...

  7. u-boot(二)makefile

    目录 u-boot(二)makefile 引入 目录结构(1.1.6) 配置文件 目标 配置具体的单板 编译阶段 过程 链接入口 配置链接地址 附录 附录A:mkconfig解析 附录B 链接脚本 t ...

  8. java 中+的运算规则

    1.Java中的加法的运算优先级是从左往右的 2.字符串""隔壁跟的+号意思是字符串的连接 就不是加法了 3.'字符' 后面的+号意思是'字符'的ascall码值和后面的值相加 c ...

  9. 【.net】The source was not found, but some or all event logs could not be searched

    1.案发现场: 注册服务的时候 2.解决方案: 用管理员身份运行CMD,再注册服务: I had to run Command Prompt with Administrator Rights.

  10. java io系列08之 File总结

    本文对File的API和常用方法进行介绍. 转载请注明出处:http://www.cnblogs.com/skywang12345/p/io_08.html File 介绍 File 是“文件”和“目 ...