Question

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

我的HTML：

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

我的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;
}

我粗糙的jQuery：

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

Answer 1

它可能因浏览器，网络连接速度等而异。这可以解释为什么它只发生一次 - 在以后的事件中图像已经加载。

我的建议是将您的图片放在一个精灵中，这样它只加载一次，然后您就可以消除更换图像时的任何网络延迟。

另一个完全不相关的建议 - 找到巩固CSS的方法。我看到你的.logo类之间有很多常见的属性 - 浮点数，显示，宽度等。你可以使用一个带有hover伪类的单个类来获得你想要的效果并保持你的CSS更简单。

Answer 2

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

要解决此问题，请使用sprite images或data URIs

Answer 3

简单使用会不会更容易：悬停？无论如何，解决方案是使用一个图像作为两个徽标并更改背景位置而不是背景图像。

编辑：您应该在a元素中添加一些内容（可能与徽标中的文本相同）。你可以使用text-indent：-1000000px;用CSS删除它。

jQuery切换类闪烁

3 个答案: