网页导航栏鼠标放上去变色。但为什么变色的背景色不是整个li。而只是的区域。求帮忙

[kankankankan2222]

li
{
list-style: none;
margin: 0px;
padding: 0px;
float: left;
height: 40px;
line-height: 40px;
font-size: 1.2em;
width: 100px;
text-align: center;
background-color: Lime;
}
a
{
color: #474747;
text-decoration: none;
}
li a:hover
{
color: #0000FF;
background-color: Aqua;
}

<div style="width: 700px; height: 40px; padding: 0;">
<ul>
<li><a href="Index.aspx">首页</a></li>
<li><a href="Job.aspx">人才招聘</a></li>
<li><a href="Interact.aspx">公众参与</a></li>
</ul>
</div>

[happytonice]

li a:hover
{
color: #0000FF;
background-color: Aqua;
}

这个css就是在<li>中的<a>标签，当鼠标悬浮时，改变<a>中的背景色。
如果想改变整个<li>的背景色，可用类似<li onmousemove="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor=''"><a href="">dddddddddddddd</a></li>
来控制。

[kankankankan2222]

谢谢。用这种方法也可以。
请问能不能把<a>的宽 高 定义成和外面的<li>一样。是<a>充满整个<li>

[li365941471]

li a:hover
{
color: #0000FF;
background-color: Aqua;
}

问题是这个吧。

[kankankankan2222]

终于解决了。是我忽略了一个地方。
问题出在：<a>的应设置为：display：block

[oran176]

因为a标签占的区域不是整个li标签区域，那你的CSS是指上a标签变色。要把a标签高度和宽度设置跟li标签一样，然后display：block。就可以了。

[TonyWang_问锋]

如果是这种结构 <li> <a></a> <p></p> </li> 请问如何让鼠标在<li>的任意区域内都能点击链接？