如何使懸停效果完全

我想我的懸停效果是完全一樣的圖片。我的文章只突出了一點點。我錯過了什麼？請爲解決方案添加解釋。

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

如何使懸停效果完全

回答

相關問題