<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>hover</title>
<meta charset="UTF-8">
<style>
.container{
background-color: #45beff;
}
.container .item{
background-color: #ee5555;
width:150px;
height:180px;
border:1px solid yellow;
/*overflow: hidden;!*将图片超出部分收起来*!*/
position: relative;/*absolute会向上找，找到有relative的，并将其覆盖*/
}
.left{
float:left;
}
.clearfix:after{
content:'.';
clear:both;
display: block;
visibility: hidden;
height:0;
}
.container .item:hover{
border: 1px solid black;
}
.container .item .text{
display: none;
}
.container .item:hover .text{
display: block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="item left">
<div class="bg">
<img style="width: 150px;height: 180px;" src="1.jpg">
</div>
<div class="text">
<div style="z-index:9;position: absolute;top:0;right: 0;bottom: 0;left:0;background-color: black;opacity:0.6"></div>
<div style="z-index:10;position: absolute;top:0;right: 0;bottom: 0;left:0;">150</div>
</div>
</div>
<div class="item left">
<div>
<img style="width: 150px;height: 180px;" src="1.jpg">
</div>
<div class="text">
<div style="z-index:9;position: absolute;top:0;right: 0;bottom: 0;left:0;background-color: black;opacity:0.6"></div>
<div style="z-index:10;position: absolute;top:0;right: 0;bottom: 0;left:0;">150</div>
</div>
</div>
<div class="item left">
<div>
<img style="width: 150px;height: 180px;" src="1.jpg">
</div>
<div class="text">
<div style="z-index:9;position: absolute;top:0;right: 0;bottom: 0;left:0;background-color: black;opacity:0.6"></div>
<div style="z-index:10;position: absolute;top:0;right: 0;bottom: 0;left:0;">150</div>
</div>
</div>
</div>
</body>
</html>
