首页 > 代码库 > 鼠标划过上移
鼠标划过上移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滑过内容上移</title>
<style>
ul,li,i,div,h3,p,label{margin: 0;padding: 0;}
.ul1 li{position:relative;width: 250px;height: 200px;list-style: none;overflow: hidden;box-shadow:0 5px 10px rgba(0, 0, 0, 0.0980392);color:#93999f;cursor: pointer;border-radius: 5px;}
.ul1 i{display:block;width: 250px;height: 150px;background: #bce8f1;}
.ul1 div{width: 250px;height: 144px;}
.ul1 div .label1{position: absolute;top:130px;background: white;transition: all 0.5s;}
.ul1 li:hover{box-shadow:0 5px 20px rgba(0, 0, 0, 0.298039); }
.ul1 li:hover .label1{top:100px;}
.ul1 div h3{font-size: 14px;margin-top: 33px;color: #444;}
.ul1 div p{height: 40px;font-size: 12px;}
.ul1 .label2{position: absolute;width: 250px;bottom: 0;height: 20px; background: white;}
.color-red{color: red;}
.r{float: right}
</style>
</head>
<body>
<ul class="ul1">
<li>
<i></i>
<div>
<label class="label1">
<h3> 组件方式开发 Web App全站 </h3>
<p> 用HTML5/CSS3/JS流行技术，以组件式开发WebApp全站。</p>
</label>
<label class="label2">
<span class="l color-red">￥78.00</span>
<span class="r">1878人在学</span>
</label>
</div>
</li>
</ul>
</body>
</html>
鼠标划过上移
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。