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如果您不想在mouseup上进行转换，可以添加

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>

Answer 2

我必须承认你的问题很有挑战性！

我建议的解决方案：

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

button:hover {
    background-color: blue;
}

button:active {
/*    background-color: red; */
    -webkit-animation: activate 0s 0s forwards;
    animation: activate 0s 0s forwards;
}

@-webkit-keyframes activate {
    0% {background-color: green;}
   100% {background-color: red;}
}

@keyframes activate {
    0% {background-color: green;}
   100% {background-color: red;}
}

fiddle

问题是基本状态是在悬停和activer伪类的后转换之后共享的，所以我不认为这只能使用转换来解决。

诀窍不是改变活动状态下的颜色，它仍然是绿色里面，但它看起来是红色的： - ）

对单个伪类应用转换

2 个答案: