我徘徊在p上，但所有p都改變了背景我在這裏做了什麼錯？

Question

我有兩個鏈接，並在一個段落內，當我將鼠標懸停在一個鏈接上時，兩個段落都會改變背景。

我做錯了什麼？或者，它甚至沒有做到這一點，我應該只使用所有的錨標記和使用的顯示方式：在CSS塊，而不是...

Demo

我有這些對我的HTML

<nav> 
<p><a href="">Home</a></p> 
<p><a href="">Contact</a></p> 
</nav> 

我有這個對於我的CSS

nav { 
    width: 100px; 
} 

nav p { 
    width: 180px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    background: -webkit-linear-gradient(#503520, #7F5C40, #503520); /* For Safari */ 
    background: -o-linear-gradient(#503520, #7F5C40, #503520); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#503520, #7F5C40, #503520); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#503520, #7F5C40, #503520); /* Standard syntax (must be last) */ 
    border: 1px solid black; 
    border-radius: 15px; 
    font-weight: bold; 
} 

nav a:link, nav a:visited { 
    color: #F3BB02; 
    text-decoration: none; 
} 

nav a:hover, nav a:active{ 
    color: black; 
    text-decoration: none; 
} 

nav:hover p { 
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: linear-gradient(#89776A, #7F5C40, #89776A); 
} 

Answer 1

你的選擇是錯誤的，它應該是...

nav p:hover { 
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: linear-gradient(#89776A, #7F5C40, #89776A); 
} 

Demo

說明：使用nav:hover p手段靶向嵌套nav所有p元件上:hover所以它更改爲nav p:hover所以這意味着目標上:hoverp元件，其嵌套在nav

---

建議：您應該使用ul和li元素來製作導航菜單，而不是p元素，而不是使用display: inline-block爲你的li或者你可以float他們以及如果你想他們內嵌，如果你不只是讓他們保持原樣。另請注意，如果您使用的是float而不是，請不要忘記至如果您使用float，請清除您的花車。

---

而且你的代碼繼續前進，你已經設置nav到100px但你的嵌套a設置爲180px這是反正多餘的，所以而是使用180px爲nav，並從a元素擺脫180px，也，你想分配height和width到a而不是p，就好像你沒有，比用戶將只有a文本作爲可點擊的，這是從用戶界面的角度來看是壞的，所以我已經調整了你的代碼在這裏演示，也請確保你打開你的a元素display: block;

Demo 2

CSS對於演示2

nav { 
    width: 180px; 
} 

nav p {  
    text-align: center; 
    line-height: 50px; 
    background: -webkit-linear-gradient(#503520, #7F5C40, #503520); /* For Safari */ 
    background: -o-linear-gradient(#503520, #7F5C40, #503520); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#503520, #7F5C40, #503520); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#503520, #7F5C40, #503520); /* Standard syntax (must be last) */ 
    border: 1px solid black; 
    border-radius: 15px; 
    font-weight: bold; 
} 

nav a { 
    display: block; 
    height: 50px; 
} 

nav a:link, nav a:visited { 
    color: #F3BB02; 
    text-decoration: none; 
} 

nav a:hover, nav a:active{ 
    color: black; 
    text-decoration: none; 
} 

nav p:hover { 
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: linear-gradient(#89776A, #7F5C40, #89776A); 
} 

Answer 2

you are targeting all p's which is wrong target one p after hover :) 

nav:p:hover { 

} 

下面

是用一個字（ 「P」：P）代碼僅移動

http://jsfiddle.net/wLb28/

Answer 3

試試這個：

Check fiddle here

正如我在代碼中看到我得到了懸停選擇是錯誤的，它應該是這樣..

nav p:hover { 
    background: -webkit-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -o-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: -moz-linear-gradient(#89776A, #7F5C40, #89776A); 
    background: linear-gradient(#89776A, #7F5C40, #89776A); 
}