Question

关于CSS 实现 LI 鼠标经过背景颜色切换效果的问题

关于CSS 实现 LI 鼠标经过背景颜色切换效果的问题

我在CSS中先设置了
ul li{ float:left;height:30px;line-height:30px;background:#FFEAF6;over-flow:hidden;margin-left:1px; padding-left:15px;padding-right:15px;}

再设置

ul li a{ display:block; background:#FFEAF6; }
ul li a:hover{background:yellow; }

产生的效果是鼠标经过的时候LI的背景颜色自动切换，但是PADDING掉的那部份却没有效果。
如何解决？

Answer 1

把ul li{}里面的background去掉；
或者：把padding-left和padding-right移动到ul li a｛｝里面；
或者：把ul li a｛｝里面的background去掉，然后把ul li a:hover改为ul li:hover.

Answer 2

padding那部分这当然是不会显示背景的啦，又不是用li:hover这样，想要显示，那把padding移到a里面吧。

Answer 3

onmouseout="this.style.background=#000" onmouseover="this.style.background=#2d4b45"
上面是鼠标没经过的时候 #000
下面是鼠标经过的时候的颜色#2d4b45