鼠标移出:

鼠标移入:

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. HDU3032 Nim or not Nim?

    解:使用sg函数打表发现规律,然后暴力异或起来即可. #include <bits/stdc++.h> typedef long long LL; ; int a[N]; inline L ...

  2. java面试——多线程

    背景:java知识比较宽泛,最好对每一类知识点进行分类总结,方便后面学习查看.该文主要用来总结多线程方面的知识点. 并发与并行的概念 并发性(concurrency)和并行性(parallel)是两个 ...

  3. canvas简易画板

    代码展示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  4. 模块---hashlib、configparse、logging

    一.hashlib模块 hashlib模块介绍:hashlib这个模块提供了摘要算法,例如 MD5.hsa1 摘要算法又称为哈希算法,它是通过一个函数,把任意长度的数据转换为一个长度固定的数据串,这个 ...

  5. JS判断一个数是否为质数

    function isPrime(number) { if (typeof number !== 'number' || number<2) { // 不是数字或者数字小于2 return fa ...

  6. Luogu P3254 圆桌问题

    题目链接 \(Click\) \(Here\) 水题.记得记一下边的流量有没有跑完. #include <bits/stdc++.h> using namespace std; const ...

  7. bzoj1106 树状数组

    https://www.lydsy.com/JudgeOnline/problem.php?id=1106 一个叫做立方体大作战的游戏风靡整个Byteotia.这个游戏的规则是相当复杂的,所以我们只介 ...

  8. 2Servlet笔记

    1.静态页面(html) 2.动态 用户可以输入数据,和页面交互. 3 BS和CS的区别 BS :Browser Server(WEB 服务器)   CS : Client(qq tcp/ip协议) ...

  9. [JVM-3]Java垃圾回收(GC)机制和垃圾收集器选择

    哪些内存需要回收? 1.引用计数法 这个算法的实现是,给对象中添加一个引用计数器,每当一个地方引用这个对象时,计数器值+1:当引用失效时,计数器值-1.任何时刻计数值为0的对象就是不可能再被使用的.这 ...

  10. 转: Linux 系统调用sysconf 获取系统配置信息

    1.前言 linux提供了sysconf系统调用可以获取系统的cpu个数和可用的cpu个数. 2.sysconf  函数 man一下sysconf,解释这个函数用来获取系统执行的配置信息.例如页大小. ...