javascript - :active 和 :hover 同时激活，填充堆栈

Question

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

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

我能做些什么来避免这种情况？

score 1 · Accepted Answer

这就是您的意思吗（单击 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;
}

1 回答 1