Question

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

同样，当选择时，hoverstate匹配未选择的状态。

以下是选中“绿色”的示例：

.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;
}

问题是，当用户点击时，它会立即从未选中的悬停状态变为选定的悬停状态，因此看起来有点像未点击它。

我希望有一个短暂的时间段，项目维持它的旧的hoverstate，也就是说，它是未选中的（红色），我将其悬停并变为绿色，我点击它，jQuery在后台添加所选/绿色状态，但是该区域保持绿色一秒钟，而不是立即进入选定的hoverstate（即显示红色）。

我考虑使用简单的（非）动画，例如：

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

在某个地方放

animation: holdGreen
animation-duration: 1s

和类似的holdRed，当我点击一个选定的一个取消选择时。

如果它只是一个具有悬停状态的类，这可以正常工作，但是在完全更改/添加也具有悬停状态的类时它不起作用。

有什么想法吗？

Answer 1

这样的事情可以起作用吗？

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; }

基本上所有发生的事情是，只有当用户鼠标在激活后离开项目时才会应用控制项目处于“选定”状态的悬停效果的类。

基本示例：http://jsfiddle.net/KfHPJ/10/

希望这有帮助。

Answer 2

我认为您需要使用JavaScript解决方法。看看这个实现你的想法的小提琴http://jsfiddle.net/chrisdanek/SK3Vc/（仅出于示例的目的使用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; } }

切换具有悬停状态的类，保持一段时间的旧状态

2 个答案: