先来看看body内容,就写了ul和li未写对应的图片
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
然后是CSS样式,这里用到子选择器
a{text-decoration:none;} img{border:none;} ul{ margin:50px auto; } li{ margin:4px auto; width:40px; height:40px; } li:nth-child(1){ background:url("images/demo1/bg.png")no-repeat; background-position:-80px -280px; } li:nth-child(2){ background:url("images/demo1/bg.png")no-repeat; background-position:0px -200px; } li:nth-child(3){ background:url("images/demo1/bg.png")no-repeat; background-position:0px -240px; } li:nth-child(4){ background:url("images/demo1/bg.png")no-repeat; background-position:0px -320px; } li:nth-child(5){ background:url("images/demo1/bg.png")no-repeat; background-position:0px 0px; } li:nth-child(1):hover{ background-position:-120px -280px; } li:nth-child(2):hover{ background-position:-40px -200px; } li:nth-child(3):hover{ background-position:-40px -240px; } li:nth-child(4):hover{ background-position:-40px -320px; } li:nth-child(5):hover{ background-position:-40px 0px; }
这里的图片呢都是一张bg.png,原图片是这样的。有需要的也可以自行下载
然后通过子选择器和hover给图片定位position,在不同的位置显示不同的内容
发表评论