圆角水平菜单问题为什么下面加粗的代码中将背景图向上移30px就会在鼠标挨到的时候变颜色呢

*{margin:0; padding:0; font-size:14px;}

a{color:#333;text-decoration:none}

.nav{list-style:none; height:30px; border-bottom:10px solid #F60; margin-top:20px; padding-left:50px;}

.nav li{float:left}

.nav li a{display:block; height:30px;text-align:center; line-height:30px; width:120px; background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg); margin-left:1px;}

.nav li a.on, .nav li a:hover{ background:url(http://img1.sycdn.imooc.com//53846438000168f901200060.jpg) 0 30px; color:#fff;}

一墨飞雪

2016-04-16

源自：导航条菜单的制作 3-3

关注问题我要回答

777

操作

收起

2 回答

小贤子回答被采纳 +3 积分
2016-04-16

a:hover 意思是当鼠标移动周围的时候的效果。按老师的课程来讲，你的代码写错了，你是直接插的图片。，老师用的是个上白下橙的图片，当鼠标移动时，用background-position改变图片在背景中的位置，也就是使图片向上移动30px，使下面橙色的部分显示出来。

0 回复有任何疑惑可以回复我~

#1

一墨飞雪提问者

非常感谢！

2016-04-16 回复有任何疑惑可以回复我~

#2

小贤子回复一墨飞雪提问者

我也是刚看完，直接动手做了一下，琢磨了一会，大家一起学习。加油

2016-04-16 回复有任何疑惑可以回复我~

carryhuihui
2016-04-16

a:hover的意思是当鼠标盘旋在周围的时候的出现的效果。你的代码有两个图片。用background-position：改变背景位置。图片向上移动可以用负数。负30像素，

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

导航条菜单的制作

参与学习 123848 人
解答问题 838 个

水平、垂直、圆角导航条菜单，让您的技术探索之路更高效

圆角水平菜单问题为什么下面加粗的代码中将背景图向上移30px就会在鼠标挨到的时候变颜色呢

我要回答关注问题

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

扫描二维码
关注慕课网微信公众号