效果图：
html部分:
<!DOCTYPE html>
<html lang=
"en">
<head>
<meta charset=
"UTF-8">
<meta name=
"viewport" content=
"width=device-width, initial-scale=1.0">
<meta http-equiv=
"X-UA-Compatible" content=
"ie=edge">
<title>商品列表鼠标效果</title>
</head>
<body>
<div class=
"grally">
<div class=
"head">
<span>热门新品</span>
<a href=
"#">更多></a>
</div>
<ul>
<li>
<div class=
"deatil">
<h2>华为手表</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (2).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为手表</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (1).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为手机</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (3).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为荣耀</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (5).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为Pro30</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (6).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为mate</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (8).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为精品</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (4).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
<li>
<div class=
"deatil">
<h2>华为nova3</h2>
<a href=
"#">马上购买</a>
</div>
<img src=
"img/img (7).jpg" width=
"210px" height=
"140px" alt=
""/>
</li>
</ul>
</div>
</body>
</html>
css部分：
*{
margin:0
;
padding:0
;
}
body{
font-family:"微软雅黑";
background-color:#ddd
;
}
.grally{
width:1024px
;
height:400px
;
background:#fff
;
margin:30px auto
;
padding:20px
;
}
.grally .head span{
font-size:18px
;
color:#333
;
}
.grally .head{
margin-bottom:20px
;
}
.grally .head a{
text-decoration:none
;
float:right
;
font-size:15px
;
color:#CD0707
;
}
.grally .head a:hover{
color:#F00
;
}
.grally ul li{
width:210px
;
height:140px
;
list-style:none
;
position:relative
;
float:left
;
margin-left:30px
;
margin-bottom:30px
;
overflow:hidden
;
}
.grally ul li .deatil{
width:210px
;
height:140px
;
background:rgba(0,0,0,0.7
);
position:absolute
;
top:-240px
;
-webkit-transition:all 0.3s ease
; <!--适应ie，谷歌，苹果浏览器内核-->
-o-transition:all 0.3s ease
; <!--适应Opera浏览器内核-->
-moz-transition:all 0.3s ease
; <!--火狐浏览器-->
-ms-transition:all 0.3s ease
; <!--微软-->
}
.grally ul li .deatil h2{
font-size:18px
;
color:#fff
;
margin-bottom:20px
;
text-align:center
;
padding-top:30px
;
}
.grally ul li .deatil a{
font-size:15px
;
display:block
;
color:#fff
;
background-color:#F00
;
text-decoration:none
;
width:100px
;
height:40px
;
text-align:center
;
line-height:40px
;
margin:0 auto
;
}
.grally ul li:hover .deatil{
top:0
;
}
