设为首页
收藏本站
首页
Portal
学院
BBS
立即注册
登录
搜索
本版
文章
帖子
搜索
热搜
活动
交友
discuz
学院
前端
jQuery
jQuery 鼠标指向元素滑出元素信息效果的实现 ...
发新帖
返回列表
查看
931
回复
0
jQuery 鼠标指向元素滑出元素信息效果的实现
复制链接
逆风天
逆风天
当前离线
16
主题
0
回帖
105
积分
超级版主
积分
105
发消息
发表于
2021-12-4 20:02:24
显示全部楼层
阅读模式
jQuery 鼠标指向滑出信息的实现:
jQuery 代码
$('[data="attachment"]').hover(
function () {
$(this).find('.attachment-info').animate({
top: "-30px"
}, 200);
$(this).find('.attachment-size').animate({
bottom: "-30px"
}, 100);
},
function () {
$(this).find('.attachment-info').animate({
top: "0"
}, 200);
$(this).find('.attachment-size').animate({
bottom: "0"
}, 100);
}
);
复制代码
Scss 代码
.attachment-box,
.attachment-info,
.attachment-link,
.attachment-size {
display: flex;
}
.attachment-box,
.attachment-info,
.attachment-link,
.attachment-size {
flex-wrap: nowrap;
}
.attachment-box {
flex-direction: column;
}
.attachment-info,
.attachment-link,
.attachment-size {
align-items: center;
}
.attachment-info,
.attachment-link,
.attachment-size {
flex-direction: row;
justify-content: center;
color: #ffffff;
}
.attachment-box {
min-width: 150px;
height: 40px;
position: relative;
}
.attachment-box,
.attachment-link {
border-radius: 4px;
}
.attachment-info,
.attachment-size {
position: absolute;
right: 0;
left: 0;
padding: 5px 10px;
margin: 0 10px;
background-color: #2D2727;
z-index: 1;
}
.attachment-info {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
top: 0;
}
.attachment-size {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
bottom: 0;
}
.attachment-link {
background-color: #2974ff;
font-size: 15px;
height: 40px;
line-height: 30px;
padding: 5px 20px;
z-index: 2;
&:active,
&:focus,
&:hover {
text-decoration: none;
color: #ffffff;
}
&:hover {
box-shadow: 0 0 10px rgba($color: #000000, $alpha: .175) inset;
}
}
复制代码
HTML 结构
<div class="attachment-box" data="attachment">
<div class="attachment-info">工作日志.docx</div>
<a href="javascript:;" class="attachment-link">点击下载</a>
<div class="attachment-size">5 GB</div>
</div>
复制代码
回复
举报
发新帖
返回列表
高级模式
您需要登录后才可以回帖
登录
立即注册
QQ
快速回复
返回列表