钉钉官网鼠标悬浮效果怎么实现的？
站长
· 阅读数 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
/* 所有 .content:hover 调整为 .content.active */
*{
margin: 0 auto;
padding: 0;
}
.cantion{
max-width: 1200px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
margin: 56px auto;
}
.content{
position: relative;
margin-top: 50px;
opacity: 1;
overflow: hidden;
padding: 32px 32px 40px;
width: 218px;
height: 300px;
background-color: #0089ff;
cursor: pointer;
border-radius: 15px;
// box-shadow:3px 3px 10px #0089ff;
transition: width .3s ease;
}
@media screen and (max-width: 1200px) {
.cantion{
width: 100%;
}
.content {
width: 100%;
height: 200px;
margin-top: 10px;
}
.content.active{
width: 100%;
height: 300px;
}
}
.content.active{
width: 470px;
}
.qi{
border: 1px solid hsla(0,0%,100%,.7);
-webkit-border-radius: 4px;
border-radius: 4px;
color: #fff;
width: 50px;
font-family: PingFangSC-Medium;
font-size: 12px;
font-weight: 500;
left: 0;
line-height: 16px;
padding: 3px 6px;
text-align: center;
position: absolute;
left: 35px;
}
.ding{
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-image: -webkit-linear-gradient(top,#6bffff,#daf8ff);
font-family: PingFangSC-Medium;
font-size: 18px;
font-weight: 500;
margin-top: 100px;
}
.content.active .ding{
font-size: 36px;
margin-top: 50px;
}
.font{
color: #fff;
font-family: PingFangSC-Medium;
font-size: 32px;
font-weight: 500;
line-height: 45px;
margin-top: 12px;
}
.content.active .font{
visibility: hidden;
}
.tiri{
position: absolute;
top: 50%;
visibility: hidden;
}
.DDEdition--text--gjFEnXn{
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
color: hsla(0,0%,100%,.8);
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
font-size: 18px;
line-height: 32px;
margin-right: 24px;
}
.DDEdition--text--gjFEnXn img {
border-style: none;
vertical-align: middle;
}
.content.active .tiri{
visibility: visible;
}
</style>
<body>
<div class="cantion" id="nav">
<div class="content active">
<div class="qi">中小企业</div>
<div class="ding">钉钉专业版</div>
<div class="font">打造属于企业自己的数字化资产底座</div>
<div class="tiri">
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">云端统一存储，无需翻找文件
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">精细场景管理，避免繁杂管控
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">提升协同效率，杜绝信息泄漏
</div>
</div>
</div>
<div class="content">
<div class="qi">大型企业</div>
<div class="ding">钉钉专属版</div>
<div class="font">专属安全开放的数字化办公平台</div>
<div class="tiri">
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">云端统一存储，无需翻找文件
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">精细场景管理，避免繁杂管控
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">提升协同效率，杜绝信息泄漏
</div>
</div>
</div>
<div class="content">
<div class="qi" style="width: 100px;">政府及超大型企业</div>
<div class="ding">钉钉专有版</div>
<div class="font">专有独享定制的数字化办公平台</div>
<div class="tiri">
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">云端统一存储，无需翻找文件
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">精细场景管理，避免繁杂管控
</div>
<div class="DDEdition--text--gjFEnXn">
<img src="https://img.alicdn.com/imgextra/i1/O1CN01Ot042U26rWRJ2NNcX_!!6000000007715-55-tps-14-14.svg" alt="" style="margin-right: 8px;">提升协同效率，杜绝信息泄漏
</div>
</div>
</div>
</div>
</body>
<script>
const cardList = document.querySelectorAll('#nav .content')
cardList.forEach(card => {
card.addEventListener('mouseenter', (event) => {
if(event.target.className.includes('active')) return
cardList.forEach(card => card.classList.remove("active"))
event.target.classList.add('active')
})
})
</script>
</html>
回复
1个回答
test
2024-07-01
虽然钉钉用的JS来处理的动画，但是我感觉用 :hover 加上一些 transition 做补间动画也能实现这个效果。
Edit
按照OP提供的简单例子，只靠CSS来实现了一个简单的效果，默认展开第一个卡片，鼠标悬停是展开对应的卡片，但是移开鼠标之后就会恢复第一张卡片的激活。CodePen Demo1
通过JS来实现悬停后保持对应卡片的展开。就是动态给 .content 元素设置 .active 这个ClassNameCodePen Demo2
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容