为何要上移30px

我只是想知道为什么要往上移动30px

梨晓柏3438161

2016-06-16

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

关注问题我要回答

1299

操作

收起

2 回答

技术为王666
2016-06-16

正如楼上所说的图片的高度是60px，而css中的设置的高度为30px，所以当鼠标移动是向上移动30px就可以显示红色的啦

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

收起回答

qq_加菲喵_0
2016-06-16

因为他给的图片是120x60 看下边代码中.nav li a的设置 height30px width120px 刚好默认图片加载到上半部分，点的时候要显示红色就让他向上移动30px刚好显示到下半部分图片就达到了显示红色的目的

<style type="text/css">
*{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-position:0 -30px; color:#fff;}
</style>