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

Question

我正在使用语义，它们的颜色 class 如下。

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

当 :active :hover 和默认状态时，它显示一个不同颜色的红色按钮。

但是我希望 class 颜色只显示在 :hover 状态；当没有悬停时，按钮被覆盖 grey colour.

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

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

Answer 1

要将按钮的非悬停状态颜色覆盖为灰色，试试这个-

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

Answer 2

是的，你可以做到。在按钮上再添加一个 class。

<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/

Answer 3

示例：

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

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

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

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

how to overwrite button's non-hover state colour to grey, but when hover button show the colour (with css framework)

css

hover

semantic-ui