css - Switching classes with hover states, maintaining old state for a period -

css - Switching classes with hover states, maintaining old state for a period -

i have area can selected or deselected clicking. has unselected state, has hover state matches selected state user gets visual hint clicking it.

similarly, when selected, hoverstate matches unselected state.

here's illustration selected beingness '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 user clicks, turns unselected-hover selected-hover, looks sort of unclicked it.

i'd have short period item maintains it's old hoverstate, is, it's unselected (red), hover , turns green, click it, jquery in background adds selected/green state, nonetheless area stays greenish sec rather going selected hoverstate (ie showing red).

i thought using simple (non-)animation, like:

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

and somewhere putting

animation: holdgreen animation-duration: 1s

and similar holdred when click selected 1 unselect.

this work okay if class hover state, doesn't work when totally changing/adding classes have hover states.

any ideas?

something work?

jquery(document).ready(function($) { var selected = false; $('.clicker').click(function(){ selected = true; $(this).addclass('selected'); }); $('.clicker').mouseout(function(){ if(selected == true) { $(this).addclass('selectedhover') }; }); });

then have class looked this:

.selectedhover:hover { background: red; }

essentially that's happening class controls hover effect item in "selected" state beingness applied 1 time users mouse leaves item after activating it.

basic example: http://jsfiddle.net/kfhpj/10/

hope helps.

css css-animations