2

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

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

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

.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

当我单击一个选定的取消选择时，还有一个类似的 holdRed。

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

有任何想法吗？

4

2 回答 2

0

像这样的东西可以工作吗？

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/

希望这可以帮助。

于 2013-02-18T23:17:32.887 回答
0

我认为您将需要使用 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; } }
于 2013-02-18T23:39:26.890 回答