html - 我将鼠标悬停在一个 p 上，但所有 p 都改变了背景，我在这里做错了什么？

Question

我有两个链接，都在一个段落中，不知何故，当我将鼠标悬停在一个链接上时，两个段落的背景都会改变。

我做错了什么？或者这甚至不是我应该只使用所有 anchor 标记并使用 display: block in 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 意味着在 :hover 上定位所有嵌套在 nav 内的 p 元素，所以将其更改为 nav p:hover 所以它意味着 :hover 上的目标 p 元素嵌套在 nav 下/p>

---

建议:你应该使用 ul 和 li 元素来制作导航菜单而不是 p 元素，而不是使用 display : inline-block 为你的 li 或者你也可以 float 它们，如果你想要它们 inline 如果你不想要而不是让它们保持原样。另请注意，如果您使用 float 而不是 不要忘记 如果您使用 float 清除 float .

---

进一步处理您的代码，您已将 nav 设置为 100px 但嵌套的 a 设置为 180px 无论如何都是多余的，因此，使用 180px 作为 nav 并从 a 元素中删除 180px , 另外，你想将 height 和 width 分配给 a 而不是 p 就好像你不这样做一样, 而不是用户将只有 a 文本可点击，从 UI 的 Angular 来看这是不好的，所以我在这个演示中提前调整了你的代码，同时确保你把你的 a 元素到 display: block;

Demo 2

演示 2 的 CSS

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