Question

请帮我解释一下如何在所有部分悬停时变暗。下面给出的代码只会在一个部分中徘徊其书面文字，但我希望所有部分都变暗。

指数：

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

的CSS：

    .promo {
    background-color: rgb(52, 132, 172);
    color: white;
    font-weight: 700;
    line-height: 200%;
    text-align: center;
    padding: 50px;
}

.promo:hover > .overlay {
    width:100%;
    height:100%;
    background-color:#000;
    opacity:0.5;
}

Answer 1

尝试将填充添加到叠加部分。

  render() {
    const { alt, heading, image, caption } = this.props;
    return (
      <BSCarousel activeIndex={this.state.index} direction={this.state.direction} onSelect={this.handleSelect}>
        <BSCarousel.Item>
          <img alt={alt} src={image} />
          <BSCarousel.Caption>
            <h3>{heading}</h3>
            <p>{caption}</p>
          </BSCarousel.Caption>
        </BSCarousel.Item>
      </BSCarousel>
    );
  }

的CSS：

  <section class="promo">
    <div class="overlay">
      <div class="container-fluid">
        <div class="text-center col-md-12">
          <h1>TEST</h1>
        </div>
      </div>
    </div>
  </section>

codepen

如何在所有部分悬停时变暗

1 个答案: