ul {
list-style:none;
padding:0;
margin:0;
display:block;
width:500px;
height:300px;
background:#e9e9e9;
position:relative;
}
ul li {display:inline-block;}
.num {
z-index:2;
position:absolute;
bottom:10px;
border:solid 1px gray;
line-height:2em;
padding: 0 1em;
cursor:pointer;
}
.n1 {right:110px}
.n2 {right:60px}
.n3 {right:10px}
.pic {
z-index:1;
display:none;
width:100%;
height:100%;
position:absolute;
}
.p1 {background:red;}
.p2 {background:orange;}
.p3 {background:green;}
.num:hover {
color:white;
background:#aeaeae;
}
.num:hover + .pic {
display:block;
}
替换样式 p1,p2,p3 的background 属性为你想展示的图片就行了。
如
.p1 {background:url(img1.jpg);}