Can a prototype of a click, mouse and mouse work together?

Question

I am trying to make a very simple button that changes color based on the mouse, mouse and click, I do it in the prototype, and it is strange if I used mouseover and mouseout, after I clicked on the button, the button will not change to white, it seems what is it because of the mouse, here is my code

$("izzy").observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

how can i fix this? Thanks.

Answer 1

If nothing else happens in the mouse, why not use css?

#izzy:hover { color: '#FFFFFF'; }

, . , , , . click add click click class, :

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

css

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

, / / - . , .

Answer 2

, , permenant , mouseout? , , :

var wasClicked = false;

$("izzy").observe('mouseover', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
    $('izzy').setStyle({ color: '#FFFFFF' });
    wasClicked = true;
});

Answer 3

, - , , .

mouseout , mouseout, .

Answer 4

:

var clicked = false
$("izzy").observe('mouseover', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#FFFFFF' });
     }
});

$("izzy").observe('mouseout', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#666666' });
     }
});

$("izzy").observe('click', function() {
    clicked = true
    $('izzy').setStyle({ color: '#cccccc' });
});

Answer 5

CSS , , . , , , mouseout .

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('mouseout');
});