react 鼠标放上去显示更多文字的卡片

最新推荐文章于 2022-06-16 18:31:16 发布

原创最新推荐文章于 2022-06-16 18:31:16 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

react 前端专栏收录该内容

34 篇文章

订阅专栏

jsx代码

import React from 'react';
import styles from './MyCard.less';

export default class MyCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hover: false };
  }

  handleMouseEnter = () => {
    this.setState({
      hover: true,
    });
  };

  handleMouseLeave = () => {
    this.setState({
      hover: false,
    });
  };

  render() {
    const { hover } = this.state;
    const cardTop = hover ? { height: '100px', opacity: 1 } : { height: '450px', opacity: 1 };
    const cardBottom = hover
      ? { height: '350px', opacity: 1 }
      : { height: '0px', opacity: 1, display: 'none' };
    return (
      <div
        onMouseEnter={this.handleMouseEnter.bind(this)}
        onMouseLeave={this.handleMouseLeave.bind(this)}
      >
        <div className={styles.card}>
          <div className={styles.cardTop} style={cardTop} />
          <div className={styles.cardTitle}>
            <h1>游褒禅山记</h1>
          </div>
          <div className={styles.cardBottom} style={cardBottom}>
            而世之奇伟、瑰怪、非常之观，常在于险远，而人之所罕至焉，故非有志者不能至也。尽吾志也而不能至者，可以无悔矣，其孰能讥之乎？
          </div>
        </div>
      </div>
    );
  }
}

less 样式

.card {
  margin: auto;
  position: relative;
  display: block;
  background: #e61620;
  width: 200px;
  height: 500px;
  background-image: url('https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png');
  background-size: contain;
}
.cardTop {
  bottom: 0;
  background: transparent;
  width: 200px;
  padding: 30px;
  height: 400px;
}
.cardTitle {
  bottom: 0;
  background: #b6b919;
  width: 200px;
  padding: 30px;
  height: 50px;
  z-index: 1;
}
.cardBottom {
  bottom: 0;
  background: #19b93c;
  width: 200px;
  padding: 30px;
  height: 0px;
}