主要思路：卡片容器宽度固定设置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')
})
}
效果如下：
Q.E.D.
