问题描述
我想制作一个在悬停时显示背景颜色的按钮，在按钮按下时显示没有背景颜色的按钮颜色.这是我当前的代码:
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!
这篇关于:active 与 :hover 不同时的样式按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！