jQuery toggle class flickers
<p>I'm using jQuery to change the class of a logo, so it displays a different image. The first time the mouseenter event fires, though, it flickers -- this doesn't happen on mouseleave or subsequent mouseenter events. Any thoughts on why?</p>

<p>My HTML:</p>

<pre><code>&lt;a href="http://localhost:5000/" class="logo" id="logo"&gt;&lt;/a&gt;
</code></pre>

<p>My CSS:</p>

<pre><code>.logo {
    background:url('logo.png');
    width:250px;
    height:42px;
    display:block;
    float:left;
}

.logo-hover {
    background:url('logo-hover.png');
    width:250px;
    height:42px;
    display:block;
    float:left;
}
</code></pre>

<p>My rough jQuery:</p>

<pre><code>$('#logo').mouseenter(function(){$(this).toggleClass('logo-hover')});
$('#logo').mouseleave(function(){$(this).toggleClass('logo-hover')});
</code></pre>
