如何使覆寫僅在特定的CSSflexbox列上延伸？

我試圖獲得這種效果：https ://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_slideleft - 但只是為了使相應的列覆寫在彈性框中。

.flexContainer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 0%;
  height: 100%;
  transition: .5s ease;
}

.Flex-item:hover .overlay {
  width: 100%;
}

.Flex-item {
  border: 5px red solid;
}

<div class="flexContainer">

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

我該怎么做？

uj5u.com熱心網友回復：

我的建議是，基于您希望.overlay元素僅覆寫其父元素的理解.Flex-item是使用transform定位和移動元素：

.flexContainer {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  position: relative;
}

.overlay {
  position: absolute;
  background-color: #008CBA;
  transition: transform 0.5s ease;
  /* moving the element along its x-axis (left/right)
     to the left (negative) 100% of the element's own
     width: */
  transform: translateX(-100%);
  /* setting a 0 length inset from the top, right,
     bottom and left sides of the parent element: */
  inset: 0;
}

.Flex-item {
  border: 5px red solid;
  /* in order to position the descendant .overlay
     element in relation to this element: */
  position: relative;
  overflow: hidden;
}

.Flex-item:hover .overlay {
  /* when the parent is hovered we position the element in
     its default state by setting the x-axis translation
     back to 0: */
  transform: translateX(0);
}

<div class="flexContainer">

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>

  <div class="Flex-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse non aliquam lectus. Ut sed orci tincidunt, consectetur neque in, suscipit urna. In vitae fringilla nunc. Praesent sodales metus ex, nec posuere est condimentum eget. Praesent cursus
    augue in quam efficitur, vitae sollicitudin ligula ultricies. Donec fermentum ex id laoreet volutpat. Nunc vitae convallis lacus, ut ullamcorper nisl. Pellentesque pharetra efficitur ipsum a congue.

    <div class="overlay">
      <div class="text">Hello World</div>
    </div>
  </div>
</div>

JS 小提琴演示。

標籤：

上一篇：用JS添加和洗掉高度打破了div的高度

下一篇：如何增加標記大小并使串列項的文本居中？