老王前端HTML课后练习第7课——运用hover改变图片定位侧边客服

先来看看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,在不同的位置显示不同的内容