如何使悬停效果完全

我想我的悬停效果是完全一样的图片。我的文章只突出了一点点。我错过了什么？请为解决方案添加解释。

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

来源

2015-04-02 Stanislaw T

修改以下选择在你的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中删除边距，然后添加padding：10px以获得相同的“缓冲区”，使其看起来相同，但也可以提供所需的高光。

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

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

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

来源

2015-04-02 18:28:01 ferr

如何使悬停效果完全

回答

相关问题