2

I basically have an area which can be selected or deselected by clicking. It has an unselected state, which has a hover state that matches the selected state so the user gets a visual hint about clicking it.

Similarly, when selected, the hoverstate matches the unselected state.

Here's an example with selected being 'green':

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

The problem is, when the user clicks, it immediately turns from unselected-hover to selected-hover, so it looks sort of like they unclicked it.

I'd like to have a short period where the item maintains it's old hoverstate, that is, it's unselected (red), I hover and it turns green, I click it, jQuery in the background adds the selected/green state, but nonetheless the area stays green for a second rather than immediately going to selected hoverstate (ie showing red).

I thought about using a simple (non-)animation, something like:

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

And somewhere putting

animation: holdGreen
animation-duration: 1s

and a similar holdRed for when I click a selected one to unselect.

This would work okay if it were just a class with a hover state, but it doesn't work when totally changing/adding classes which also have hover states.

Any ideas?

4

2 に答える 2

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 に答える
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 に答える