select child-elements 在 chrome 开发工具中使用图像覆盖时不再可用 (card-img-overlay)

Question

当使用 bootstrap 的 card-img-overlay class 时，我无法再使用 chrome 开发工具检查 child 元素。例如。在下面的屏幕截图中，我无法再 select 任何 headers 了。

我是否以错误的方式使用了 class？

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>
  )
}

Answer 1

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

注意，当你这样做时，它也会阻止所有 children 的事件（至少在 Chrome 中）所以你需要为 children.

启用它

.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

select child-elements 在 chrome 开发工具中使用图像覆盖时不再可用 (card-img-overlay)

Can't select child-elements in chrome dev tools anymore when using an image overlay (card-img-overlay)

google-chrome-devtools

twitter-bootstrap

reactjs

bootstrap-4