前端_鼠标触碰事件
纯css编写，无js控件，鼠标触碰，下拉出新的界面。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*定义大的div*/
.demo1 {
width: 995px;
height: 130px;
text-align: center;
overflow: hidden;/*隐藏多出来的部分*/
background-color: #005E5E;/*背景定义为墨绿色*/
position: relative;/*相对定位*/
}
.demo1 h1 {
display: inline-block;/*把行内元素变为块类元素*/
letter-spacing: 0.5em;/*字间距*/
color: #F0F8FF;
margin-top: 35px;/*内边距*/
}
/*定义第二个div*/
.demo1 .demo2{
color: #fff;
display: block;/*同理变为块级元素*/
position: absolute;/*绝对定位*/
top: -130px;/*第二个div在第一个div的上面130px*/
width: 100%;
left: 0;
padding: 42px 0;/*第二个div内字的上下边距为42px,注意这里会改变第二个div的大小*/
background-color: burlywood;
transition: all 0.3s ease;/*定义过渡的属性，下面是适用于的浏览器*/
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
font-size: 40px;
font-family: arial;
text-shadow: 2px 2px 2px grey;
}
.demo2 a{
text-decoration: none;
color: #005e5e;
}
.demo2 a:hover{
text-shadow: 6px 6px 6px grey;
}
.demo1:hover .demo2{
top: 0;
}
</style>
</head>
<body>
<div class="demo1">
<div class="demo2">
<a href="http://www.hvhipot.cn"><strong>www.hvhipot.cn</strong></a>
</div>
<h1>"创新+制造"20载国电西高</h1>
</div>
</body>
</html>
触碰前的效果：
触碰后的效果：
希望各路大神指教，给出更简便的方法。
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
