Css 使用悬停状态切换类，在一段时间内保持旧状态

我基本上有一个区域，可以通过点击来选择或取消选择。它有一个未选择的状态，该状态有一个与所选状态匹配的悬停状态，因此用户可以获得有关单击它的可视提示

同样，选中时，悬停状态与未选中状态匹配

下面是一个选择为“绿色”的示例：

.clicker { //standard state
    width: 100px;
    height: 100px;
    background-color: red;
}

.clicker:hover {
    background-color: green;
}

.green { // selected state
    background-color: green;
}

.green:hover {
    background-color: red;
}

问题是，当用户单击时，它会立即从未选中的悬停变为选中的悬停，因此看起来有点像他们松开了它

我希望有一段短时间，项目保持其旧的悬停状态，即未选中（红色），我悬停，它变为绿色，我单击它，背景中的jQuery添加选中/绿色状态，但该区域保持绿色一秒钟，而不是立即变为选中的悬停状态（即显示红色）

我考虑过使用一个简单的（非）动画，比如：

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

在某处

animation: holdGreen
animation-duration: 1s

当我单击要取消选择的选定项时，会出现类似的保留

如果它只是一个具有悬停状态的类，那么这就可以了，但是当完全更改/添加也具有悬停状态的类时，它就不起作用了

---

有什么想法吗？

像这样的想法行得通吗

jQuery(document).ready(function($) {
    var selected = false;
    $('.clicker').click(function(){
        selected = true;
        $(this).addClass('selected');
    });
    $('.clicker').mouseout(function(){
        if(selected == true) { $(this).addClass('selectedHover') };
    });
});

然后你会有一个类似这样的类：

.selectedHover:hover { background: red; }

本质上，所发生的一切是，控制处于“选定”状态的项的悬停效果的类仅在用户鼠标在激活该项后离开该项时应用

基本示例：

---

希望这有帮助。

我认为您需要使用JavaScript解决方案。看看这把小提琴，它实现了你的想法（使用webkit前缀只是为了举例，所以请登录Chrome）。您会注意到它在单击时的行为与预期的一样，但是默认的悬停操作有一个问题-应用背景色有一个延迟

.clicker { width: 100px; height: 100px; border: 2px solid; background-color: red; }

.clicker:hover { background-color: green; -webkit-animation-name: holdRed; -webkit-animation-duration: 1s; }

.green { background-color: green; animation: none; }

.green:hover { background-color: red; -webkit-animation-name: holdGreen; -webkit-animation-duration: 1s; }

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

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