html - 如何使用CSS焦点？

Question

我熟悉使用 css 和“悬停”功能，但我想知道如何使用点击功能。

所以开始使用您可以拥有的悬停功能:

#test {
background: black;
height: 100px;
width: 100px;
}

然后当鼠标“悬停”在上方时，我希望它变成白色

#test:hover {
background: white;
height: 100px;
width: 100px;
}

那么在点击时更改背景的方法是否类似？

谢谢!

詹姆斯

Answer 1

伪选择器 element:focus 通常用于元素具有焦点的情况。就像您在文本区域或输入框内打字一样。

正如您在 this demo 中看到的那样, button:focus 不会使 background-color 有任何不同的 onClick。

要使其在被点击时发生变化，请使用 element:active 伪选择器:

button:active
{
    background-color: #f00;
}

工作演示 here .