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

原创 老王  2020-05-06 10:44:12  阅读 553 次 评论 0 条
摘要:

子选择nth-child()结合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,原图片是这样的。有需要的也可以自行下载

老王前端HTML课后练习第7课——运用hover改变图片定位侧边客服  CSS3样式 hover 笔记 第1张


然后通过子选择器和hover给图片定位position,在不同的位置显示不同的内容

hover属性改变图片定位 老王前端HTML课后练习第7课——运用hover改变图片定位侧边客服  CSS3样式 hover 笔记 第2张


本文地址:http://wangfangwen.com/post/79.html
版权声明:本文为原创文章,版权归 老王 所有,欢迎分享本文,转载请保留出处!
阿里云服务器优惠券
减肥不为美,只为走路不磨腿,付出不亚于任何人的努力,成功永远没有尽头,只有岔路口...

发表评论


表情

还没有留言,还不快点抢沙发?