0

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

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

上面代码的问题在于，它会在:active不移除由:hover. 如何去除背景颜色？

4

3 回答 3

3

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

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

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

注意： :hover必须在 CSS 定义中的:linkand之后:visited（如果它们存在），才能生效！

于 2013-09-20T17:33:39.093 回答
2

这个怎么样？

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

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

jsFiddle 工作示例（一）

于 2013-09-20T00:30:42.950 回答
-1

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

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

于 2020-10-09T11:43:28.590 回答