Prototype click, mouseover and mouseout can't work together?

Question

I'm trying to do a very simple button that changes color based on mouseover, mouseout and click, I'm doing this in prototype and the weird thing is if I used mouseover and mouseout, after I clicked on the button, the button wouldn't change to white, seems like it is because of the mouseout, here's 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 it? Thanks.

Answer 1

Unless there's something else happening in mouse over and out, why not use css?

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

However, I'm a little confused as to what exactly you want to happen. Assuming you want the button white if it has been clicked or if the mouse is over it. I'd have the click event handler add a clicked class, like so:

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

And the css as so

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

This has the advantage of separating the state - clicked/not-click and mouse over/not over - from the style - black or gray. Right now they're all mixed in together, creating confusion and opening yourself to bugs.

Answer 2

Do you mean that you wan the mouse click to cause a permenant change in the style that is not replaced by mouseout? If so, try using a flag, like so:

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