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>
)
}
}
antd card 组件实现鼠标移入移出效果的更多相关文章
- js鼠标移入移出效果【原】
<HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...
- CSS3的过渡效果,使用transition实现鼠标移入/移出效果
在css中使用伪类虽然实现了样式的改变,但由于没有过渡效果会显得很生硬.以前如果要实现过渡,就需要借助第三方的js框架来实现.现在只需要使用CSS3的过渡(transition)功能,就可以从一组样式 ...
- # li鼠标移入移出,点击,变背景色,变checkbox选中状态
移入移出背景色改变和点击背景色改变,两者是否相互覆盖? 若移出背景色恢复,影响点击事件的背景色改变,会产生效果为: 点击时,背景色改变,并且checkbox选中 鼠标移开后,checkbox仍选中,但 ...
- div展现与收起效果(鼠标移入移出)
效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- CSS3鼠标移入移出图片生成随机动画
今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...
- jquery事件一 ---鼠标移入移出
比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...
- Vue中通过鼠标移入移出来添加或取消class样式(active)
基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...
- 函数传参,改变Div任意属性的值&&图片列表:鼠标移入/移出改变图片透明度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Qt 为QPushButton、QLabel添加鼠标移入移出事件
QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...
随机推荐
- js 判断 是否在当前页面 当前页面是否在前端
1.使用visibilitychange 浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. document.addEventListener("visibilit ...
- 模拟赛 yjqb
对于这种“不能交叉”的条件,不是很好处理.那么就考虑一下dp dp[i][j]表示,考虑A中用前i个,考虑连接B中用前j个,最大匹配.(类似LCS的DP) 转移:dp[i][j]=max(dp[i][ ...
- 洛谷P3195 玩具装箱
P3195 [HNOI2008]玩具装箱TOY 第一道斜率优化题. 首先一个基本的状态转移方程是 要使f[i]最小,即b最小. 对于每个j,可以表示为一个点. 然后我们取固定斜率时截距最小的即可,高中 ...
- 【洛谷P4878】布局
题目大意:给定一个长度为 N 的递增序列,有 M 组差分约束关系,求满足这些约束关系时,第一个数和第 N 个数的差是多少. 题解:首先,能否满足约束关系需要判断一下负环,若满足约束关系,再从第一个点 ...
- C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码
本文介绍在 C# 中使用 ThoughtWorks.QRCode.dll 生成指定尺寸和边框宽度的二维码.网上文章大多只是简单介绍内置参数的设置,根据我的使用目的,增加了自定义目标二维码图片尺寸和白边 ...
- Django(十)COOKIE和session
https://www.cnblogs.com/haiyan123/p/7763169.html from django.shortcuts import render,redirect # Crea ...
- (栈)leetcode856 Score of Parentheses
Given a balanced parentheses string S, compute the score of the string based on the following rule: ...
- python nmap
#!/usr/bin/env python# -*- coding: utf-8 -*-import sysimport nmap scan_row = []input_data = input('P ...
- SpringCloud之注册中心Eureka搭建
POM: <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring ...
- 简洁架构的思想,基于go实现
https://manuel.kiessling.net/2012/09/28/applying-the-clean-architecture-to-go-applications/ 从 Clean- ...