javascript - :active and :hover both active at the same time, 填充堆栈

Question

目前我的一个设计有问题，我正在使用 :hover CSS 元素创建悬停按钮，然后使用 :active 元素确保它保持不变。

但是，:hover 和 :active 都在各自的 CSS 规则中指定了填充，这会在您单击按钮同时悬停在按钮上时产生问题 - 填充堆栈和按钮完全错位。

我该怎么做才能避免这种情况？

Answer 1

这就是您的意思吗(单击 div 以查看悬停/事件状态)。

HTML:

<div class="a">Some content</div>

CSS:

.a{
    display:block;
    padding:5px;
}
.a:hover{
    padding:5px;
    background:red;
}
.a:active{
    padding:5px;
    background:blue;
}

示例:http://jsfiddle.net/justincook/JsWCF/