:active 与 :hover 不同时的样式按钮答案

【问题标题】：Style button when :active different from :hover:active 与 :hover 不同时的样式按钮
【发布时间】：2020-10-09 19:43:28
【问题描述】：

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

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

上面代码的问题是它在:active 时将图标变成了颜色，但没有删除:hover 设置的背景颜色。如何去除背景色？

【问题讨论】：

在 :active 中设置新的背景属性？

标签： css hover

【解决方案1】：

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

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

伪状态继承值。出于一致性目的，最好只在伪状态规则中声明您正在更改的样式。

注意：:hover 必须在 CSS 定义中位于 :link 和 :visited（如果存在）之后，才能生效！

【讨论】：

【解决方案2】：

这个怎么样？

我猜，它的原因在于您使用的第一个属性 background-color 和第二个 fill。

button:hover {
    background-color: red;
}
button:active {
    background-color: blue;
}

jsFiddle working example (1)

【讨论】：

背景色是给div的背景上色； fill 是为 div 内的 svg 图标着色。

【解决方案3】：

`按钮：悬停{背景颜色：透明；颜色：黄色；}

按钮：活动{背景：白色；颜色：黑色；}`

【讨论】：