html - 如何使悬停效果完整

Question

我希望我的悬停效果是完整的，就像图片中那样。我的只突出了文本周围的一小部分。我错过了什么？请为解决方案添加解释。

http://jsfiddle.net/terzista/9vtpyojh/

CSS:

.nav
{
    margin:0 auto;
    width:100%;
    position: absolute;
    top:0px;
    left:0px;
    z-index: 4;
    background-color:rgba(172,175,176,0.68);
}
.nav ul
{
    text-align: center;
}
.nav li
{
    width: 6em;
    letter-spacing:0.1em;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;  
}
.nav a{
    /*display: inline-block;*/
    text-decoration: none;
    color: #D12C2C;
}

.nav li:hover
{
    color: #666;
    background-color: #ED8C8C;
}
.nav li:hover a
{
    color: #fff;
}

Answer 1

在你的 css 中修改以下选择器，

.nav ul
{
    text-align: center;
    margin:0;
}
.nav li
{
    width: 6em;
    letter-spacing:0.1em;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;  
    padding:10px;
}

唯一突出显示的是你的 li。如果你的 ul 有边距，那么突出显示的 li 和你的 ul 的其余部分之间会有空间(可以这么说)。从 ul 中删除边距，然后添加 padding:10px 以获得相同的“缓冲区”使其看起来相同，但也提供您想要的突出显示。

.nav
{
	margin:0 auto;
	width:100%;
	position: absolute;
	top:0px;
	left:0px;
	z-index: 4;
	background-color:rgba(172,175,176,0.68);
}
.nav ul
{
	text-align: center;
    margin:0;
}
.nav li
{
	width: 6em;
	letter-spacing:0.1em;
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;	
    padding:10px;
}
.nav a{
	/*display: inline-block;*/
	text-decoration: none;
	color: #D12C2C;
}

.nav li:hover
{
	color: #666;
	background-color: #ED8C8C;
}
.nav li:hover a
{
	color: #fff;
}

<section class="nav">
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">about</a></li>
			<li><a href="#">contact</a></li>
			
		</ul>
	</nav>
</section>