Html CSS：即使鼠标被抬起，悬停也不会停止

我的问题是，如果我将鼠标悬停在某个链接上，背景会按我所希望的那样改变。但是，当我移动到下一个链接时，它将保持这种状态，如果我移动到最后一个链接，所有链接看起来都处于悬停状态。但如果我将鼠标从链接上移开，它们都会恢复正常。这就像一个步骤序列。如果链接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>

仪表板

---

您需要关闭

标签

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

仪表板

---

您需要关闭

标签

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

仪表板 正确的HTML

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

仪表板 Div还需要结束标记

正确的HTML

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

仪表板

---

Div还需要关闭标记

您需要关闭所有

标记。您正在

上应用悬停样式。但这种方法并不有效

检查代码中的更正和改进

HTML

---

您需要关闭所有

标记。您正在

上应用悬停样式。但这种方法并不有效

检查代码中的更正和改进

HTML 仪表板 兄弟关闭你的div标签：），它肯定会工作

仪表板

兄弟关闭你的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>