jQuery切换类闪烁

我正在使用jQuery更改徽标的类别，因此它会显示不同的图像。但是，当mouseenter事件第一次触发时，它会闪烁——这不会发生在mouseleave或后续mouseenter事件上。有什么想法吗

我的HTML：

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

我的粗略jQuery：

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

---

它可能因浏览器、网络连接速度等而有所不同。这就解释了为什么在以后的事件中图像已经加载时，它只会发生一次

我的建议是把你的图像放在一个精灵中，这样它只加载一次，然后你就可以消除任何网络延迟来改变你的图像

---

另一个完全无关的建议-找到一种方法来整合你的CSS。我看到你的.logo类之间有很多共同的属性-float、display、width等。你可能可以使用一个类和maybe:hover伪类来获得你想要的效果并使你的CSS更简单。

原因是，在你第一次使用分配给它的类之前，不会从服务器请求“hover”图像。因此，在第一次悬停时，它必须在显示图像之前下载图像

---

若要解决此问题，请使用或替代使用：hover不是更容易吗？无论如何，解决方案是使用一个图像作为两个徽标，并更改背景位置，而不是背景图像

---

编辑：您还应该在

元素中添加一些内容（可能与徽标中的文本相同）。您可以使用文本缩进：-1000000px；使用CSS删除它。
完全同意……我建议添加一个示例来说明如何执行此操作。类似于jQueryUI的功能：.ui图标{宽度：16px；高度：16px；背景图像：url（images/ui-icons_666666_256x240.png）；.ui-icon-triangle-1-n{背景位置：0-16px；}数据URI唯一的问题是缺少IE7支持，但我以前使用过Sprint。这应该可以做到。IE7很痛苦，我同意。PS如果它回答了您的问题，请不要忘记将此标记为答案；0）
$('#logo').mouseenter(function(){$(this).toggleClass('logo-hover')});
$('#logo').mouseleave(function(){$(this).toggleClass('logo-hover')});