如何将按钮的非悬停状态颜色覆盖为灰色，但当悬停按钮显示颜色时（使用css框架）

Question

我使用语义，他们的颜色类如下所示。

<button class='ui red button'> hover me to change red </button>

在以下情况下显示具有不同阴影的红色按钮：活动：悬停和默认状态。

但是我希望类颜色只显示在：悬停状态; 当没有悬停时，按钮会覆盖灰色颜色。

可以通过添加一个CSS类来完成吗？

注意：我不想复制每个语义颜色类来实现此结果

Answer 1

示例：

.button:not(:hover) {
  color: white;
  background: green;
}

.button {
  background: red;
  color: #fff;
}

<button class='ui red button'> hover me to change red </button>

Answer 2

要将按钮的非悬停状态颜色覆盖为灰色，请尝试此 -

button.red.button{background-color:grey;background:gray;}

Answer 3

是的，你可以做到。再向该按钮添加一个类。

<button class='ui red button hover-red'> hover me to change red </button>

.hover-red{
background: #ddd !important;
}

.hover-red:hover{
background-color: #E75859 !important;
color: #FFFFFF;
}

http://jsfiddle.net/rp0cd0me/