html - CSS:即使鼠标抬起后悬停也不会退出

Question

我的问题是，如果我将鼠标悬停在一个链接上，背景会按照我希望的那样改变。但是，当我移动到下一个链接时，它会保持这种状态，如果我移动到最后一个链接，所有链接看起来都处于悬停状态。但如果我将鼠标从链接上移开，它们都会恢复正常。这就像一个步骤序列。如果悬停链接 1，则只有链接 1 受到影响。如果链接 2 悬停，则链接 2 上方的任何内容也会悬停，链接 3 也是如此。链接 3 上方的任何内容都将悬停。我该如何解决这个问题，让它单独悬停？任何帮助将不胜感激。谢谢。这是我的 CSS 代码:

#profilebarsectiondiv {
    width: 100%;
    background-color: #285059;
    font-family: sans-serif;
    font-weight: bold;
    color: #ffffff;
}

.profilebarlink{
    width: 100%;
    background-color: #dce8ea;
}

.profilebarlink a{
    font-family: sans-serif;
    font-weight: bold;
    font-size: 8;
    text-decoration: none;
    color: #206676;
}

.profilebarlink:hover{
    background-color: #e67e17;
}

还有我的 HTML

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a>
<div class="profilebarlink"><a href="#">Profile</a>
<div class="profilebarlink"><a href="#">Contacts</a>

Answer 1

您需要关闭您的 <div>标签

<div id="profilebarsectiondiv">Dashboard</div>
<div class="profilebarlink"><a href="#">Home</a></div>
<div class="profilebarlink"><a href="#">Profile</a></div>
<div class="profilebarlink"><a href="#">Contacts</a></div>