Задать содержимое карты, видимое только при наведении мыши с модулем Gatsby + Bootstrap React + s css - PullRequest
Новая
       36

Задать содержимое карты, видимое только при наведении мыши с модулем Gatsby + Bootstrap React + s css

0 голосов
/ 09 апреля 2020

Во-первых, стек, который я использую: - React: Gatsby - Typescript - S css (используя модуль для каждого компонента) - React Bootstrap

Я пытаюсь показать содержимое Карта Bootstrap реагирует только тогда, когда на нее наведена мышь. Проблема в том, что я использую модули Gatsby для s css, и я не могу найти способ прямого доступа к классу .card-img-overlay для изменения его свойств при наведении, так как модуль добавляет свое имя в класс.

Мое решение было обернуть вокруг него div. Однако это не работает. Контент скрыт, но ничего не происходит, когда мышь наводит на него курсор. Вот код:

projectCard.tsx 

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

interface ProjectInfo {
  title: string
  description: string
  imageSrc: any
}

const ProjectCard = (project: ProjectInfo) => (
  <Card className="bg-dark text-white">
    <Card.Img src={project.imageSrc} alt="Card image" />
    <div className={styles.cardContent}>
      <Card.ImgOverlay>
        <Card.Title> {project.title} </Card.Title>
        <Card.Text> {project.description} </Card.Text>
      </Card.ImgOverlay>
    </div>
  </Card>
)
export default ProjectCard

projectCard.module.s css

.cardContent {
  visibility: hidden;
}

.cardContent:hover {
  visibility: visible;
}

Любая помощь будет оценена!

1 Ответ

0 голосов
/ 09 апреля 2020

Мне удалось найти решение с помощью предыдущего комментария (кто-то удалил комментарий .. но все равно спасибо!)

Я следовал этому коду: https://codepen.io/askibinski/pen/RwWwxxO

<Card className={styles['card']}>
    <Card.Img src={project.imageSrc} alt="Card image" className={styles['card-content-image']} />

    <div>
      <Card.ImgOverlay className={styles['card-content']}>
        <Card.Title className={styles['card-content-text']}> {project.title} </Card.Title>
        <Card.Text className={styles['card-content-text']}> {project.description} </Card.Text>
        <Card.Text className={styles['card-content-text']}> {project.technologies} </Card.Text>
      </Card.ImgOverlay>
    </div>
  </Card>

Обратите внимание, что у меня не было прямого доступа к элементам Bootstrap, поэтому я создал класс для каждого из них. Кроме того, у gatsby есть соглашение camelCase, но, поскольку оно не go хорошо соответствует css стандартам, я переписал это, добавив в gatsby-config. пластырь для решения проблемы. Я все еще хочу получить доступ к переменным React Bootstrap, если это возможно. Например, я хочу центрировать Card.Img. Я попытался использовать className, но у него нет доступа к самому изображению.

А вот код, пытающийся получить доступ к имени React Bootstrap, но он не работает 

.card-img {
  // any type of css here doesn't have any effect
}
...