CSS，菜单：活动不工作答案

【问题标题】：CSS, menu:active not workingCSS，菜单：活动不工作
【发布时间】：2011-12-29 01:14:43
【问题描述】：

我有一个简单的菜单：

<ul id="menu2">
    <li> <a href="index.php?id=home">Home</a></li>
    <li> <a href="index.php?id=about">About us</a></li>
    <li> <a href="index.php?id=contacts">Contacts</a></li>
</ul>

在 css 文件中我有：

#menu2 {
    background: black;
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 220px;
}
#menu2 li {
    margin: 0;
    padding: 0;
}
#menu2 a {
    background: black;
    border-bottom: 1px solid #393939;
    color: #ccc;
    display: block;
    margin: 0;
    padding: 9px 16px;
    text-decoration: none;
}

#menu2 a:hover {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

#menu2 a:active {
    background: black url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

除了#menu2 a:active 完全不工作，而#menu2 a:hover（具有相同规则）工作正常之外，一切都运行良好。问题是什么？我错过了什么吗？

【问题讨论】：

标签： css menu hover

【解决方案1】：

它按预期工作。我将活动状态染成红色。
尝试单击 en 元素并按住按钮。背景将是红色的。

您看不到变化，因为 hover 和 active 的 CSS 是相同的！

示例
http://jsfiddle.net/dqH3F/1/

样本包含

#menu2 a:active {
    background: red url("../images/select.png") left center no-repeat;
    color: #fff;
    padding: 9px 16px;
}

【讨论】：

澄清一下：由于 :hover 和 :active 规则完全相同，您不会看到悬停和单击之间有任何区别 - 正如在 Smamatti 的示例中显示的那样，当使用不同的规则时。（编辑：答案的好更新！）

【解决方案2】：

您能否提供更多关于究竟是什么不工作和/或演示的详细信息。看代码好像没问题。

:active 状态是指按下链接的时间，因此如果您在菜单项上按住鼠标按钮，它应该会按预期工作，因为悬停工作处于活动状态具有相同的属性。

当你在它链接的页面上时，带有 :active 的链接不会保持这种状态，它会恢复为正常链接。

【讨论】：

哦，谢谢！那么当链接被按下时它有不同的样式时我该怎么做呢？
听起来您希望链接在页面加载时具有不同的样式，例如，如果您单击“关于我们”菜单项并转到您希望它显示为突出显示的页面以让用户知道他们在那个页面上。在这种情况下，您需要通过服务器端代码来实现，或者您可以使用 javascript 并解析当前 URL 并将其与菜单 URL 进行比较，当找到匹配项时，对其应用不同的样式。

【解决方案3】：

上面代码中 :hover 和 :active 的背景完全相同。

您是否尝试在活动时设置背景 x 和 y 位置？

没有图像背景和不同颜色（用于测试），您的代码可以正常工作：请参阅此处http://jsfiddle.net/stursby/9Pccb/

【讨论】：