Question

css中设置了hover 为什么还要设置 hover span？

.nav_main { height:36px; overflow:hidden;}
.nav_main ul li { float:left; font-size:14px; font-weight:bold; margin:5px 5px 0 5px;}
.nav_main ul li a { float:left; display:block; height:26px; line-height:26px; color:#fff; padding-left:20px;}
.nav_main ul li a span { display:block; padding-right:20px;}
.nav_main ul li a:hover { background:url(../images/nav_bg.gif) 0 -163px no-repeat;}
.nav_main ul li a:hover span { background:url(../images/nav_bg.gif) right -163px no-repeat;}
.nav_main ul li a#nav_current { height:31px; line-height:31px; background:url(../images/nav_bg.gif) 0 -132px no-repeat; color:#646464;}
.nav_main ul li a#nav_current span { height:31px; background:url(../images/nav_bg.gif) right -132px no-repeat;}

-------------------------------------------------------
1 css中设置了hover 为什么还要设置 hover span？
2 hover span 和current span中right -163px 和 right -132px 这个right是什么意思？
和hover current里的 0 -163px， 0 -132px 有什么区别？有什么不同作用？
接VLQ的追问。
3 在表示位置时。字符型的表达方式能和数值型的混用吗？如这里的right -163px。 能不能详细讲点。

Answer 1

1、你的li标签中包含有span标签，CSS定义了li标签的鼠标经过效果时，还定义了span标签鼠标经过的单独效果
2、这里的right -163px 和 right -132px 这个right，还有你后面提到的0 -163px， 0 -132px，指的都是是背景图片的平铺方式。你会看到有些背景图片是很多张背景图片放在一同一个图片中调用的，这里就是这样用的，我先给你解释第一个right -163px，意思是背景图片靠右从上面163px起平铺，第二个0 -163px，是从水平位置0px，垂直163px处开始平铺你的背景图片，这种取背景图片都是先取水平位置再取垂直位置的，我这么说可能你不太了解，你试验一下就明白了
3、在CSS里面，right和left、和数值型的像素是可以混用的，你这里的right -163px，你第一个第二个问题，都是说的背景图片平铺取值。
4、如果你是新接触CSS，你不需要这样写，每一个背景图片都单独做一个图片，单独调用，你用的时候就用不到这些了，等你熟悉以后，可以再把很多的背景图片整合到一个图片文件中，统一调用，哪个时候你再来看这个，就简单啦。

Answer 2

1.hover是鼠标悬停后的样式嘛，因为a 下面span在鼠标悬停后，也有样式变动，而不止a本身
2.right -163px 和 right -132px 这个是背景图片显示位置的坐标，这个要看具体图片了，用这个来控制显示图片的不同区域，可以感觉到是不同的按钮。
.nav_main ul li a:hover就是鼠标悬停的按钮样式，
.nav_main ul li a#nav_current是当前页面的按钮样式，nav_current的名字是可以自己定义的

追问

哦。还有有一点没有回答。为什么hover后面设置的事0 -163px, 而hover span 后面设置的是
right -163px？ 我已经附上整合图了，从hover和hover span纵坐标可以看出，应该是同一个图片，就是实际上的悬停样式。它这里用到sprites. 三个小问
1 这个0 -163px很好理解，但这个right -163px。谁知道这个right是从哪开始，也应该是个具体的数 值吧？
2 为什么span那个不写成同样的0 -163px，都是同一个地方的悬停样式啊。

追答

1.right就是右，可以理解成背景右对齐。还有四个top（顶部）、bottom（底部）、left（左对齐）跟你这里的0是一样的效果、center（居中），
0 -163px这个跟left -163px的效果是一样的
2.因为images/nav_bg.gif是分别是在左右，a的背景在左边，span的背景在右边，悬停就出现。但是为什么这么做我就难理解了，是我直接用一张背景就可以了，就你上面这张图，没有必要分成a 和span两个背景

Answer 3

1. a:hover表示的是当鼠标经过a标签是，a标签的样式改变；
   a:hover spen则表示的是当鼠标经过a标签是，a标签下面的spen标签样式发生改变

2. 在background-position中第一个值表示左右 第二个值表示上下。
   right -132px中right表示右对齐，也就是背景图片从右边排过来，跟100% -132px是一样的；
   同样的道理，left -132px跟0 -132px效果也是一样的

3. 可以
   

Answer 4

1、a:hover 是指鼠标放到a上之后，对a的样式发生改变。a:hover span 是指鼠标放到a上之后，对a 下级的span要样式改变。
2、你先了解下css中background 都有哪些参数 background：颜色 URL（图片路径） 图片距离左边距 图片距离右边距 平铺方式。 可能你理解的不太对，并没有right。
3、不太清楚你的问题， CSS中，必须写单位，比如px ,em ,rem 等等。

Answer 5

标签 : hover {}表示划过这个标签,这个标签发生的属性变化
标签1:hover 标签2{} 表示划过标签1时候,标签2发生的属性变化