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

Posted 2023-03-06

【中文标题】我将鼠标悬停在一个 p 上，但所有 p 都改变了背景我在这里做错了啥？

【英文标题】：I hovered over a p but all p changed background what did I do wrong here?我将鼠标悬停在一个 p 上，但所有 p 都改变了背景我在这里做错了什么？

【发布时间】：2014-01-29 00:06:45

【问题描述】：

我有两个链接，都在一个段落内，当我将鼠标悬停在一个链接上时，两个段落都会改变背景。

我做错了什么？或者，我应该只使用所有锚标记并使用 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);

【参考方案1】：

试试这个：

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

【参考方案2】：

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

nav:p:hover 

 

以下是您的代码，仅移动了一个单词("p" :P)

http://jsfiddle.net/wLb28/

【参考方案3】：

你的选择器错了，应该是……

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 表示所有p 元素都嵌套在:hover 上的nav 中，因此将其更改为nav p:hover，因此这意味着:hover 上的目标p 元素嵌套在@987654331 下@

---

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

---

继续使用您的代码，您已将nav 设置为100px，但您的嵌套a 设置为180px，这无论如何都是多余的，因此，请使用180px 代替nav 并获得从a 元素中删除180px，此外，您想将height 和width 分配给a 而不是p，就像您没有一样，用户将只有a 文本作为可点击的，从 UI 的角度来看是不好的，所以我在这个演示中提前调整了你的代码，还要确保你把你的 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);

【讨论】：

啊！感谢所有的建议，难怪我觉得我做错了什么，完全明白你所说的 nav 和 p 的宽度的意思。我想我仍然需要很多经验才能让事情顺利进行。