样式按钮时：活动不同于：悬停 [英] Style button when :active different from :hover

问题描述

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

I want to make a button that displays a background color when hovering and a button color without a background color when the button is down. Here is my current code:

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

上述代码的问题在于，当图标变为：active 但不会移除由：hover 设置的背景颜色。如何删除背景颜色？

The problem with the above code is that it turns the icon a color when :active but doesn't remove the background color set by :hover. How do I remove the background color?

推荐答案

您必须在上设置新的背景颜色：hover state



You have to set a new background color on :hover state

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

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

Pseudo states inherit values. For consistency purposes, it is best to only declare the styles which you are changing in your pseudo state rules.

注意： ：hover 必须出现在：link 和：visited 之后（如果它们存在）在CSS定义中，为了生效！

Note: :hover MUST come after :link and :visited (if they are present) in the CSS definition, in order to be effective!

这篇关于样式按钮时：活动不同于：悬停的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！