如何让上面的文章达到mor高度后覆盖下面的文章？

Question

我将鼠标悬停在文章上时需要一些帮助，我想覆盖它下面的文章而不是推动整个下一行，我试着给它一些填充然后 heigh 但我得到了相同的结果。我也尝试使用 Jquery 来使用 .hover() 函数，它给出了相同的结果。

整个容器都有一个 display flex ，每篇文章都有一个 width 和 height ，当悬停在文章上时它会增加高度。没有悬停的文章有480px然后悬停时有500px

.container {
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.articles_container {
  border-radius: 4px;
  max-width: calc(100vw - 10px);
  margin-bottom: 1px;
  display: flex;
  flex-wrap: wrap;
}
article {
  width: 24%;
  border: 1px solid red;
  margin-left: -1px;
  margin-top: -1px;
  
  height: 480px;
}
img {
  width: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  height: auto;
}
.bottom {
  display: none;
}

article:hover {
  height: 500px;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <title>Static Template</title>
  </head>
  <body>
    <div class="container">
      <div class="articles_container">
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>

          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
        </article>
        <!--        -->
      </div>
    </div>
   
  </body>
</html>

Answer 1

编辑这里是一个使用 javascript

的例子

const articleItem = document.querySelector('.article_item')
for(let i = 0; i<10;i++){
  articleItem.insertAdjacentHTML("afterend", articleItem.outerHTML);
}
const articles = document.querySelectorAll('article')

articles.forEach(a=>{
  a.addEventListener('mouseover',handleHover)
  a.addEventListener('mouseout',handleHoverEnd)
})

function handleHover(e){
  const width = e.currentTarget.clientWidth 
  const top = e.currentTarget.offsetTop + 1 //>>adjust for margins set in css
  const left = e.currentTarget.offsetLeft + 1 //>>adjust for margins set in css
  e.currentTarget.classList.add('active')
  e.currentTarget.style.cssText = `top: ${top}px; left: ${left}px; width: ${width}px`
}
function handleHoverEnd(e){
  e.currentTarget.classList.remove('active')
}

.container {
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
}
.articles_container {
  border-radius: 4px;
  max-width: calc(100vw - 10px);
  margin-bottom: 1px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.article_item{
width: 24%;
}
article {
  display: flex;
  flex-direction: column;
  border: 1px solid red;
  margin-left: -1px;
  margin-top: -1px;
  height: 180px;
  background-color: white;
  overflow: hidden;
}
img {
  max-width: 100%;
}
.bottom {
  display: none;
  
}

.active {
  position: absolute;
  height: 300px;
  z-index: 3;
}

<body>
    <div class="container">
      <div class="articles_container">
        <div class="article_item">
        <article>
          <img src="https://03.cdn37.se/zY/images/2.247758/elcykel-ecoride-ambassador-26-axs-h-8-dam-svart.jpeg" alt="bycekel" />
          <div class="info">
            <h4>Titel</h4>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Pariatur
              aut quibusdam ducimus totam modi culpa? Quisquam eius tempora
              libero aperiam fugit ex temporibus reprehenderit, recusandae
              necessitatibus quia, dignissimos accusamus asperiores!
            </p>
            <button>Click Me</button>
          </div>
          <div class="bottom">
            <p>25</p>
          </div>
        </article>
        </div>
      </div>
    </div>
   
  </body>

如何让上面的文章达到mor高度后覆盖下面的文章？

How to make the article above cover the article below when it gets mor height?

html

javascript

css

overflow

padding