JQuery Div mousein/out/click background position broken
<p><strong>Background Image:</strong>
<a href="https://tornhq.com/WorkingOn/Images/TextEditor/buttons.png" rel="nofollow">https://tornhq.com/WorkingOn/Images/TextEditor/buttons.png</a></p>

<p><strong>JSFiddle:</strong>
<a href="http://jsfiddle.net/3RVCy/2/" rel="nofollow">http://jsfiddle.net/3RVCy/2/</a></p>

<p><strong>JQuery:</strong></p>

<pre><code>$(document).ready(function () {
    $('#FontSize').mouseover(function () {
        $(this).css({ "background-position": '-14px 0px' });
    });
    $('#FontSize').mouseout(function () {
        $(this).css({ "background-position": '0px 0px' });
    });
    $('#FontSize').click(function () {
        $(this).css({ "background-position": '-28px 0px' });
    });
});
</code></pre>

<p>I am looking for the simplest way to have a button where when you hover over it shows background-position: -14px, however out it reverts back to -0px and clicking on it will keep it at -28px. Currently on my local version, if you over out/in it works, click works but then if you hover out when the active style is showing (the click event is the active style) it'll revert back again.</p>

<p>Best Regards,</p>

<p>Tim</p>
