实现效果：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>彩妆热卖产品列表</title>
<style type="text/css">
*{
margin: 0px;
}
.title{
background-color: #E9185A;
color: white;
padding: 10px 0px 10px 20px;
width: 350px;
height: 30px;
line-height: 30px;
}
.box{
position: relative;
border-bottom: dashed 1px grey;
width: 370px;
height: auto;
}
.img-out{
display: none;
text-align: center;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: red;
cursor: pointer;
}
span{
color: white;
font-weight: bold;
background-color: black;
display: inline-block;
text-align: center;
margin: 10px;
width: 25px;
height: 25px;
border-radius: 50%;
line-height: 25px;
}
a:hover div{
display: block;
}
</style>
</head>
<body>
<div>
<div class="title"><h3>大家都喜欢的彩妆</h3></div>
<div class="box">
<span>1</span>
<a>Za姬芮新能真皙美白隔离霜 35g
<div class="img-out">
<img src="image/icon-1.jpg">
<p>￥62.00 最近69122人购买</p>
</div>
</a>
</div>
<div class="box">
<span>2</span>
<a>美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml
<div class="img-out">
<img src="image/icon-2.jpg">
<p>￥89.00 最近13610人购买</p>
</div>
</a>
</div>
<div class="box">
<span>3</span>
<a>菲奥娜水漾CC霜40g
<div class="img-out">
<img src="image/icon-3.jpg">
<p>￥59.90 最近13403人购买</p>
</div>
</a>
</div>
<div class="box">
<span>4</span>
<a>DHC 蝶翠诗橄榄卸妆油 200ml
<div class="img-out">
<img src="image/icon-4.jpg">
<p>￥169.00 最近16757人购买</p>
</div>
</a>
</div>
</div>
</body>
</html>
关于鼠标悬停hover的用法：
可以使用 标签1：hover 标签2 选择器，用于改变标签1后代标签2的样式。
display:none用于隐藏对象，而display：block可以用于显示元素。两者配合可以达到鼠标悬停显示元素，鼠标离开隐藏元素的效果。
