How can I Ignore onMouseOut after onClick function?
<p>I have a <code>#myObject</code> element.</p>

<p>I'm trying to make <code>#myObject</code>'s background change to <code>#000</code> when mouse is hovered over it and make its background change back to <code>#ffff00</code> on hover out.</p>

<p>But I want to make <code>#myObject</code>'s background change to <code>#FFF</code> when a user clicks it.</p>

<p>I used 3 functions for onMouseOver, onMouseOut and onClick. </p>

<p>But after the user's click, the "onMouseOut" function is triggered.</p>

<p>How can I get the <code>onClick</code> background toggle to work after user hovers out of  <code>#myObject</code> after clicking it?</p>

<pre><code>&lt;div id="myObject" onMouseOver='objHover(this.id);' onMouseOut='objMouseOut(this.id);' onclick='objClick(this.id);'&gt;&lt;/div&gt;

function objClick(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#FFF');
}

function objHover(id) {
    document.getElementById('captchaResposta').value = id;
    $('#'+ id).css('background','#000');
}

function objMouseOut(id) {
    document.getElementById('captchaResposta').value = id;
    $('.imagemCaptcha').css('background','#ffff00');
}
</code></pre>