这时候,你可以使用hover伪类使a的整个盒模型生效。
.link a{display:blockpadding:2px 10px}
/*这样,a标签的范围就是文字上下各扩出2px左右各扩出10px/*
然后
.link a:hover{background:#newcolor}
就能实现你要的效果。
你所说的不要点击效果,要记住lovehate的前后顺序,以及各自代表的意义。
hover即onmouse的效果,active是点击效果。
1.inline是行内元素,同行可以显示,像span、font、em、b这些默认都是行内元素,不会换行,无法设置宽度、高度、margin、border2.block,块元素,div、p、ul、li等这些默认都是块元素,会换行,除非设置float
3.inline-block,可以同行显示的block,想input、img这些默认就是inline-block,出了可以同行显示,其他基本block一样,但是inline-block兼容性很差,要用需要写hack
inline-block的hack如下:
display: -moz-inline-stack火狐2hack
display: inline-block
vertical-align: top撑出盒子的bug修复
zoom: 1后面两行IE7hack
*display: inline
使用例子 ul li{ display: -moz-inline-stackdisplay: inline-blockvertical-align: topzoom: 1*display: inline}
inline-block有个好处,就是div设置浮动只能实现居左,或者居右,而inline-block可以通过上级容器设置text-align:center实现块元素居中