单击链接后，锚点悬停保持不变答案

【问题标题】：Anchor hover remain the same after click the link单击链接后，锚点悬停保持不变
【发布时间】：2014-03-20 20:36:18
【问题描述】：

假设我想创建 nav-top-menu 按钮，每个按钮都有锚标签，并且给出了 href。我有样式 a:hover 到每个按钮。当我单击链接时，我单击的那个按钮的 a:hover 消失了。我希望在单击链接后锚点悬停保持不变。我最好在 CSS 中这样做。

button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

【问题讨论】：

标签： css hyperlink hover

【解决方案1】：

在您的问题中，您使用了选择器：

button a:hover

这几乎肯定不是您需要使用的选择器，它会选择处于悬停状态的元素内的元素。您可能在实际链接上有您的 .button 类，然后选择它们：

a.button:悬停

这会选择一个处于悬停状态的元素。

回到您的主要问题，要将链接设置为“活动”或“激活”后的链接，您需要使用 :active pseudo-class selector。您还应该使用 :focus 选择器，这样只使用键盘的人也会看到您的样式发生变化。

a.button:hover,
a.button:focus,
a.button:active {
    border: 1px solid #000;
    box-shadow: 1px 1px 0px 8px #1fb6dc;
}

在这里，我将所有选择器链接在一起，以免您重复样式。您也可以在没有“a”元素选择器的情况下执行此操作（取决于您的其他 css）：

.button:hover,
.button:focus,
.button:active {
    border: 1px solid #000;
    box-shadow: 1px 1px 0px 8px #1fb6dc;
}

如果它以这种方式工作，它会让你的 css 更灵活一点（参见object oriented css）。

【讨论】：

【解决方案2】：

您的 CSS 代码中有错误的语法。 这是正确的解决方案：

a.button:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

a.button:active {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}

<a> 的类是button。

【讨论】：

【解决方案3】：

试试这个：

button a:hover {
    border:1px solid #000;
    box-shadow:1px 1px 0px 8px #1fb6dc;
    }
button a:active
{
        border:1px solid #000;
        box-shadow:1px 1px 0px 8px #1fb6dc;
        }

【讨论】：