从 CSS 中的过渡中排除伪类

Question

是否可以排除与另一个伪类具有相同属性的伪类被转换？ 请查看以下示例代码供您参考：

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}

<button class="transition">Submit</button>

如果我想将转换应用于:hover 伪类而不是:focus 伪类怎么办？

Demo on JSFiddle

Answer 1

您可以在:focus上添加transition: none;

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

您也可以在:hover 部分中移动transition: all 1s ease-in 500ms;，但您仍然需要:focus 上的transition: none;，因为:focus 仅在您也:hover 时才会发生

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:hover {
  background-color: black;
  transition: all 1s ease-in 500ms;
}

button:focus {
  background-color: green;
  transition: none;
}

<button class="transition">Submit</button>

Answer 2

尝试将转换属性应用于button:not(:focus)：

button {
  height: 50px;
  width: 150px;
  font-size: 20px;
  color: white;
  border: none;
  background-color: blue;
}

button:not(:focus) {
  transition: all 1s ease-in 500ms;
}

button:hover {
  background-color: black;
}

button:focus {
  background-color: green;
}

<button class="transition">Submit</button>