如何完成悬停效果

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;
}

唯一突出的是你的李。如果你的ul有边距，那么突出显示的li和ul的其余部分之间会有空格（可以这么说）。从ul中删除边距，然后添加填充：10px以获得相同的＆＃34;缓冲区＆＃34;允许它看起来一样，但也给你想要的亮点。

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;