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