jQuery 鼠标指向元素滑出元素信息效果的实现
jQuery 鼠标指向滑出信息的实现：
jQuery 代码
$('').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>
页:
[1]