Question

我使用CSS和一些Javascript构建了一个下拉导航。当用户第一次使用导航时，我遇到了闪烁问题。它在某些浏览器上更常出现，而不是其他浏览器（Chrome）。这真的很烦人，这是我第一次真正使用任何javascript，特别是导航中的OnMouseOver和OnMouseOut。以下是导航的链接：http://demo2.reclaimdesign.com/testnav.html。有没有办法来解决这个问题？

谢谢， DH

Answer 1

由于您正在使用图片，因此您需要预先加载所有图片和他们的翻转图片。

＆＃34;闪烁＆＃34;因为翻转图像需要加载而发生。更好的方法是使用一个图像作为背景，并使用CSS在悬停时移动背景图像。这被称为＆＃34;滑动门。＆＃34;

Here's one link with a tutorial.但是，如果你谷歌有几十个。

Answer 2

我怀疑它可能是由于图像未被预加载，即：“悬停”状态图像仅在鼠标悬停在它们上方时才被激活和加载。

我会研究用Javascript预加载图像，以便当用户将鼠标移动到元素上时，它们已准备好摇滚，或者（甚至更好）使用精灵来包含所有悬停/非悬停您需要在一个图像中的图像，可以使用CSS移动像“幻灯片规则”一样来实现相同的目标。

StackOverflow上有很多关于图像预加载的例子，但这里有一个如何实现它的例子：

var image_to_preload = new Image();
image_to_preload.onload = function(){ // could do something here... };
image_to_preload.src = "/path/to/image.jpg";

就像我说的，我更喜欢使用精灵，而且我怀疑有很多例子，但作为菜单的例子，这些项目的尺寸看起来像是110 x 35像素，所以如果你创建了一个尺寸为110 x 70像素的图像（两个悬停状态都塞进一个图像中）你可以用CSS“滑动”它：

.menuAllProducts
{
    width: 110px;
    height: 35px;
    background-image: url(background-sprite.jpg);
    background-position: 0px 0px;
}

.menuAllProducts:hover
{
    background-position: 0px -35px;
}

我希望这有帮助并且有意义！祝好运！：）

OnMouseOver导航闪烁

2 个答案: