Question

<style>
div {
  color: red;
}


button {
  color: yellow;
}

button:hover {
  color: green;
}

button:disabled {
  color: inherit;  /* This sets the color to red but I want yellow */

  /* could do this but it's less flexible */
  color: yellow;
}
</style>
<div>
  <button disabled>Yo</button>
</div>

上面解释了我遇到的问题。我尝试过使用inherit，unset，initial但是没有一个实现我想要的。＆＃34;继承＆＃34;是接近但使用父颜色。当一个项目被禁用时，我希望将颜色恢复为原始封面，即使它是悬停而不必在禁用的伪类中明确声明颜色。

Answer 1

您可以使用CSS变量来定义颜色并避免伪类内的更改：

＆＃13;

:root {
  --main-color: yellow;
}

div {
  color: red;
}

button {
  color: var(--main-color);
}

button:hover {
  color: green;
}

button:disabled {
  color: var(--main-color);
}

＆＃13;

<div>
  <button disabled>Yoooooo</button>
</div>

＆＃13;

或者对选择器进行一些更改。避免将悬停应用于禁用按钮，默认情况下，此按钮将保留初始颜色：

＆＃13;

div {
  color: red;
}

button {
  color: yellow;
}

button:not([disabled]):hover {
  color: green;
}

＆＃13;

<div>
  <button disabled>Yoooooo</button>
</div>
<div>
  <button >Yoooooo yooo</button>
</div>

＆＃13;

Answer 2

为什么不使用它？

:not() CSS伪类表示与选择器列表不匹配的元素。

button, button:disabled {
  color: yellow;
}
button:not(:disabled):hover {
  color: green;
}

或者

button {
  color: yellow;
}
button:not(:disabled):hover {
  color: green;
}

Answer 3

https://codepen.io/anon/pen/XZepyB

div {
  color: red;
}

button,
button:disabled {
  /* assign the default colors together */
  color: yellow;
}

button:hover {
  color: green;
}

button:disabled:hover {
  /* then override the disable state separately as needed */
  color: #cc00cc;
}

Answer 4

不确定我是否理解正确，但这个基本的CSS机制将是：

＆＃13;

div {
  color: red;
}

button, button:hover:disabled {
  color: yellow;
}

button:hover {
  color: green;
}

＆＃13;

<div>
  <button>Yo</button>
</div>

<div>
  <button disabled>Yo</button>
</div>

<div>
  <button disabled>Yo</button>
</div>

＆＃13;

Answer 5

只需将 ":disabled:hover" 添加到 "button" 选择器并删除 ":disabled"：

button,
button:hover:disabled {
  color: yellow;
}

在伪类之前将css值恢复为值

5 个答案: