主要思路:卡片容器宽度固定设置flex布局,对每张卡片添加监听事件,当鼠标悬浮时清除所有卡片的active属性,为当前悬浮的卡片添加active属性,avtive属性设置css的flex值大一些,这样当鼠标悬浮时那张卡片就能撑开一大片空间了

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>expanding-card</title>

  <link rel="stylesheet" href="./style.css">

</head>
<body>
  <div class="container">
    <div class="panel" style="background-image: url('../public/images/1.webp')">
      <article>
        你曾经为多少人多少事皱过眉头?我从来没有。只怕眉头皱得多,形成了皱纹,即使用上两千元一瓶的去皱膏也无法力挽狂澜。
      </article>
    </div>
    <div class="panel" style="background-image: url('../public/images/2.webp')">
      <article>
        那个人家住费城,小时候很穷,他走进一家银行,问道:“劳驾,先生,您需要帮手吗?”一位仪表堂堂的人回答说:“不,孩子,我不需要。”
      </article>
    </div>
    <div class="panel" style="background-image: url('../public/images/3.webp')">
      <article>
长久并不一定好,短暂并不一定坏,人类不知基于什么原因,一直在追求长久,而不知咏叹短暂,这可能是人类有寻根究底的天性之故。
      </article>
    </div>
    <div class="panel" style="background-image: url('../public/images/4.webp')">
      <article>
        那年我还小,记不清是几岁了。我母亲故去后,父亲晚上带着我睡。我觉得脖子后面不舒服,父亲拿灯照照,肿了,有一个小红点;半夜又照照,有一个小桃子大了;天亮再照照,有一个莲子盅大了。父亲说:“坏了,是对口!”
      </article>
    </div>
    <div class="panel" style="background-image: url('../public/images/5.webp')">
      <article>
如果爱一个女人,男人也应该拒绝,使她知道不要用自己的肉体补偿些什么,一个肯接受补偿的男人,对这个女人的爱,太浅太薄了。
      </article>
    </div>
  </div>

  <script src="./script.js"></script>
</body>
</html>
*{
  box-sizing: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container{
  width: 90vw;
  display: flex;
}

.panel{
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  flex: 1;
  height: 80vh;
  transition: all 0.4s ease-in;
}

.panel article{
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 32px;
  opacity: 0;
}

.active{
  flex: 5;
}

.active article{
  opacity: 1;
  transition: opacity 0.4s ease-in;
}

.active article::after{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
// 获取所有卡片的dom元素
const panels = document.querySelectorAll('.panel')

//为每一张卡片添加点击事件的监听
panels.forEach(panel => {
  panel.addEventListener('mouseover', () => {
    removeActive()
    panel.classList.add('active')
  })
})

// 清除所有卡片的active属性
function removeActive() {
  panels.forEach(panel => {
    panel.classList.remove('active')
  })
}

效果如下:

drgfh

Q.E.D.


一个二次元web开发咸鱼