reactjs - 使用图像覆盖（card-img-overlay）时，无法再在 chrome 开发工具中选择子元素

Question

使用引导程序的card-img-overlay类时，我无法再使用 chrome devtools 检查子元素。例如，在下面的屏幕截图中，我无法再选择任何标题。

我是否以错误的方式使用课程？

import React from "react"
import Layout from "../components/layout"
import { graphql } from "gatsby"
import SEO from "../components/seo"
import Img from "gatsby-image"
import Card from "react-bootstrap/Card"
import TimeToRead from "../components/time-to-read"
import Tags from "../components/tags"

const SinglePost = ({ data, pageContext }) => {
  const { frontmatter } = data.markdownRemark
  const { timeToRead } = data.markdownRemark

  return (
    <Layout pageTitle={frontmatter.title}>
      <SEO title={frontmatter.title} />
      <Card>
        <Img
          className="card-image-top"
          style={{ maxHeight: "150px" }}
          fluid={frontmatter.image.childImageSharp.fluid}
        />
        <div className="card-img-overlay">
          <Tags tags={frontmatter.tags} />
        </div>
        <Card.Body>
          <Card.Title>{frontmatter.title}</Card.Title>
          <Card.Subtitle>
            <div className="d-flex justify-content-between">
              <span className="text-info">{frontmatter.date}</span>
              <TimeToRead minutes={timeToRead} />
            </div>
            <hr />
          </Card.Subtitle>
          <Card.Text
            dangerouslySetInnerHTML={{ __html: data.markdownRemark.html }}
          ></Card.Text>
        </Card.Body>
      </Card>
    </Layout>
  )
}

标签： reactjstwitter-bootstrapbootstrap-4google-chrome-devtools

Answer 1

看起来，您无法访问元素（并且您的用户无法选择文本），因为它card-img-overlay正在覆盖它。我不得不说这是overlays 应该如何工作的。但是如果你无论如何都需要阻止它，你可以使用pointer-events: none.

请注意，当您执行此操作时，它也会阻止其所有子级的事件（至少在 Chrome 中），因此您需要为子级启用它。

.parent {
  position: relative;
}

.overlay {
  background: rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.overlay * {
  pointer-events: all;
}

<div class="parent">
  <div class="overlay">
    <button>Click</button>
  </div>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
  <p>text text</p>
</div>

https://jsbin.com/bariyipoha/1/edit?html,css,输出