根据状态

Question

我有一个默认绿色背景的按钮。在hover上，背景颜色会发生变化。

单击该按钮时，我希望它回退到绿色背景。

我如何实现这一目标？我尝试了以下但没有成功：

＆＃13;

＆＃13;

.btn {
  background-color: #4dd0e1
}

.btn:hover {
  background-color: #01579b
}

.btn:active {
  background-color: #4dd0e1
}

.btn:visited {
  background-color: #4dd0e1
}

＆＃13;

<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

.btn{
  background-color: aqua
}
.btn:visited{
  background-color: yellow
}
.btn:hover {
  background-color: skyblue
}
.btn:active{
  background-color: pink;
}
.btn:focus{
  background-color: pink;
}

<a href="#" target="_blank" class="waves-effect btn"><i class="material-icons right">arrow_forward</i>button</a

编写css代码

时，您应该按照此顺序进行操作

1. a:link
2. a:visited
3. a:hover
4. a:active
5. a:focus

我不知道为什么，但这会使你的代码工作。

您只需更改CSS选择器的顺序（:visited，:hover，:active，:focus）

Answer 2

使用以下内容：

.btn:focus{ 
  background-color: #4dd0e1 
}

Answer 3

使用MaterialiseCss颜色辅助字符串 Materialize Colors

＆＃13;

＆＃13;

<a class="waves-effect waves-light btn amber darken-4">button</a>

＆＃13;

＆＃13;

＆＃13;

Answer 4

尝试一下〜

<style>
.btn:hover{background-color: #b44ce1}
.btn{background-color: #b44ce1}
</style

<a class="waves-effect waves-light btn">Submit</a>

对我来说很好〜