对单个伪类应用转换

Question

我想在我的按钮上进行转换,该转换只能应用于hover其他伪类而不应用于其他伪类.

button {
    width: 100px;
    height: 50px;
    color: white;
    background-color: green;
    transition: background-color 1s;
}

button:hover {
    background-color: blue;
}

button:active {
    background-color: red;
}

<button>Nice Button!</button>

所以在这种情况下,我想要它从绿色到蓝色的过渡,hover但不是从蓝色到红色的过渡active.我怎样才能实现它？

Answer 1

设置transition: none;在:active伪类+,如果你不希望在鼠标松开的过渡,可以添加

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

button {
  width: 100px;
  height: 50px;
  color: white;
  background-color: green;
  transition: background-color 1s;
}
button:hover {
  background-color: blue;
}

button:focus:hover {
  background-color: blue;
  transition: none;
}
button:active:hover {
  background-color: red;
  transition: none;
}

<button>Nice Button!</button>