css - :active different from :hover时的样式按钮

Question

我想制作一个在悬停时显示背景色的按钮，在按下按钮时显示没有背景色的按钮颜色。这是我当前的代码:

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active #windowClose polygon {
    fill:#1a82b8;
}

上述代码的问题在于它在 :active 时将图标变为一种颜色，但不会删除通过 :hover 设置的背景颜色。如何去除背景颜色？

Answer 1

您必须在:hover 状态下设置新的背景色

.windowButton:hover {
    background-color:#1a82b8;
}
.windowButton:active {
   fill:#1a82b8;
   background-color:#000000;/*You can put the color you want*/
}

伪状态继承值。为了保持一致性，最好只声明您在伪状态规则中更改的样式。

注意: :hover 必须在 :link 和 :visited(如果存在)之后CSS定义，才能有效!