0

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

4 回答 4

2

您需要关闭<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>
于 2012-05-18T03:52:35.563 回答
1

您需要关闭所有<div>标签。你正在申请悬停样式在<div class="profilebarlink">. 但这种方法效率不高。

通过代码中的更正和改进检查此演示。

HTML

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

CSS

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

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

.profilebarlink:hover{
    background-color: #e67e17;
}​
于 2012-05-18T04:00:54.030 回答
0

您正确的 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也需要结束标签

于 2012-05-18T03:52:47.370 回答
0 
<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 标签:)，它肯定会工作

于 2012-05-18T04:39:44.137 回答