How to have a selected state that overrides jQuery hover?
<p>I have a series of links that change the different content of an information box with javascript.</p>

<p>I am using jquery hover on the links for a mouseover effect:</p>

<pre><code>$('a.year').hover(
function (event) {
    console.log("mouseover detected");  
        $(this).animate({   fontSize: '16px',
                            color: '#405481',
                            opacity: '1'
                        },  100);
    },
function (event) {
        $(this).animate({   fontSize: '10px',
                            color: '#405481',
                            opacity: '0.25'
                        },  100);
    }
);
</code></pre>

<p>and I'm also trying to create a selected state by switching the class so the current link stays larger without the hover function still effecting it:</p>

<pre><code>$("#" + value).toggleClass('year year_selected');
</code></pre>

<p>the problem is that the class switch doesnt work! any ideas how to do this?</p>
