主要思路:卡片容器宽度固定设置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.