Question

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?

My HTML:

<a href="http://localhost:5000/" class="logo" id="logo"></a>

My CSS:

.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;
}

My rough jQuery:

$('#logo').mouseenter(function(){$(this).toggleClass('logo-hover')});
$('#logo').mouseleave(function(){$(this).toggleClass('logo-hover')});

Answer 1

The reason is because the ‘hover’ image won’t be requested from the server until you first use the class you’ve assigned to it. So on the first hover it has to download the image before showing it.

To fix this, use sprite images or alternatively data URIs