什么 :active 或 :hover 有效？ [关闭]

Question

:active 和 :hover 在元素上都处于活动状态时的行为是什么。 我写了一些代码http://jsfiddle.net/z6v4r/ 来演示这个。显然 :hover 是赢家。

在另一个场景中（我正在处理），我为以下 HTML 编写了 css：

<div class="abc">
    <div class="xyz">
        <input type="Something">
        </input>
    </div> 
</div>

CSS

div.abc div.xyz input:hover
{
border: 1px inset rgb(0, 69, 124);
    border-radius:15px;
    background-color: rgb(0, 69, 124);
    color:white;
}
div.abc div.xyz input:active,div.abc div.xyz input:focus
{
    border: 1px inset rgb(0, 69, 124);
    border-radius:15px;
    background-color:rgba(66, 87, 133, 0.24);
    outline-style:none;
}

现在所有这些都处于活动状态，我得到了 :active/:focus 的背景颜色和来自 :hover 的字体颜色。

我需要如何将这些应用于元素的概念。

Answer 1

Active 用于click 事件。

如果您按住鼠标，您可以看到您的属性在工作。

您可以在 chrome 中使用 toggle element state 进行调试

这对于像register 或login 这样的繁重进程非常有用，因为它需要时间从服务器获取答案或移动到不同的页面。

Answer 2

这是因为您首先为 :hover 指定 CSS，然后为 :active 指定 CSS。 CSS 优先于最后出现的值。因此，在您的情况下，如果您想优先考虑 :hover 情况，请稍后在文件中写入。