使用Gatsby + Bootstrap React + scss模块将卡片内容设置为仅在悬停时可见

npm install -g gatsby-cli

gatsby new my-project

cd my-project
npm install bootstrap react-bootstrap node-sass gatsby-plugin-sass

module.exports = {
  plugins: [
    'gatsby-plugin-sass',
  ],
}

import React from 'react'
import { Card } from 'react-bootstrap'
import './Card.scss'

const HoverCard = () => {
  return (
    <Card className="hover-card">
      <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>
          This card content is only visible on hover.
        </Card.Text>
      </Card.Body>
    </Card>
  )
}

export default HoverCard

.hover-card {
  opacity: 0;
  transition: opacity 0.3s;

  &:hover {
    opacity: 1;
  }
}

import React from 'react'
import HoverCard from '../components/Card'

const IndexPage = () => {
  return (
    <div>
      <h1>My Gatsby Website</h1>
      <HoverCard />
    </div>
  )
}

export default IndexPage