How to 'Turn Off', or 'Override' a Named Function

I have the following HTML:

img class="hoverContact"
img class="hoverContact"
img class="hoverContact"

and jQuery code:

function highlightContact(ev) {
   $(ev).addClass('lightblue');  
}
function unhighlightContact(ev) {
   $(ev).removeClass('lightblue');  
}

and

$('.hoverContact').live("mouseover", function(){
    highlightContact(this);
});
$('.hoverContact').live("mouseout", function(){
    un开发者_运维百科highlightContact(this);
});
$('.hoverContact').live("click", function(){
    highlightContact(this);
});

And I am trying to keep the lightblue class on a click, but obviously when I click I need to mouseaway and it turns off the lightblue class... so I need help figuring out how to override the unhighlight class...

There might be a better way but I would do it like this - you can set arbitrary properties with jQuery and not screw up your page validation or browser compatibility by sticking data in a randomly named html attribute. The "proper" way to do that is to include another XML namespace on the HTML tag but I've never seen a practical reason to do it.

$('.hoverContact').attr('custom:on', '0')
.live("mouseover", function(){
    highlightContact(this);
})
.live("mouseout", function(){
    if ($(this).attr('custom:on') == '0') {
      unhighlightContact(this);
    }
})
.live("click", function(){
    $('.hoverContact').attr('custom:on', '0');
    $(this).attr('custom:on', '1');
    highlightContact(this);
});