Question

假设我想创建nav-top-menu按钮，每个按钮都有锚标签并给出了href。我有风格a：将鼠标悬停在每个按钮上。当我点击链接时，a：hover到那个按钮我点击了。我希望锚点悬停在我点击链接后保持不变。我在CSS中做得更好。

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

Answer 1

试试这个：

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

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

Answer 3

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

button a:hover

这几乎肯定不是您需要使用的选择器，这会在悬停状态下选择元素内部的元素。您可以在实际链接上使用.button类，然后使用以下选项进行选择：

a.button：悬停

这会在其悬停状态中选择一个元素。

回到你的主要问题，在其＆＃34;活跃＆＃34;中设置链接的样式。或者在激活＆＃34;激活＆＃34;之后，您需要使用：active pseudo-class selector。您还应该使用：焦点选择器，这样只使用键盘的人也会看到您的样式发生变化。

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

在这里，我将所有选择器链接在一起，以节省您重复的样式。你也可以在没有＆＃34; a＆＃34;那里的元素选择器（取决于你的其他CSS）：

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

如果它以这种方式运作，它会让你更灵活（见object oriented css）。

单击链接后锚定悬停保持不变

3 个答案: