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

【问题标题】：Can't select child-elements in chrome dev tools anymore when using an image overlay (card-img-overlay)使用图像覆盖（card-img-overlay）时，无法再在 chrome 开发工具中选择子元素
【发布时间】：2019-12-09 10:12:47
【问题描述】：

当使用引导程序的 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>
  )
}

【问题讨论】：

如果没有看到它是一种爱，这很难说，但要么元素没有pointer-events: none，要么有一个元素（或伪元素）“覆盖”了它下面的元素。
非常感谢，添加pointer-events: none 使它工作。 <Card.ImgOverlay style={{ pointerEvents: "none" }}>。请将此添加为答案，以便我接受。

标签： reactjs twitter-bootstrap bootstrap-4 google-chrome-devtools

【解决方案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,output

【讨论】：