从 CSS 中的转换中排除伪 class

Question

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

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 伪 class 而不是 :focus 伪 class 怎么办？

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>

从 CSS 中的转换中排除伪 class

Exclude a pseudo-class from transition in CSS

css

css-selectors

css-transitions