css:避免图像悬停第一次闪烁

Question

我有一个锚,当一个class-btn包含一个类的类徘徊时,它会改变它的背景图像background-image.

徘徊时,它有

a.class-btn:hover
{
    background-image('path/to/image-hovered.jpg');
}

当页面第一次加载并且您第一次悬停此按钮时,它会闪烁(下载悬停图像需要大约半秒钟).如何避免没有JavaScript的闪烁(只允许简单的CSS和HTML)？

我试图搜索Stack Overflow类似的问题,但没有运气.

刚刚添加:

• 我应该"预加载"悬停的图像吗？怎么样？
• 我应该使用z-index还是不透明度？

它适用于所有浏览器,因此该解决方案适用于所有浏览器.

Answer 1

这是一个简单有效的css图像预加载技术,我曾多次使用过.您可以通过放置内容来加载多个图像:url()url()url()...等.

body:after{
 display:none;
 content: url(path/to/image-hovered.jpg) url(path/to/another-image-hovered.jpg);
}

Answer 2

避免这种情况的最简单方法是使用图像精灵.有关概述,请查看此CSS Tricks文章.

这样,您不仅可以解决您所看到的闪烁问题,还可以减少HTTP请求的数量.您的CSS看起来像:

a.class-btn { background: url('path/to/image.jpg') 0 0 no-repeat; }
a.class-btn:hover { background-position: 0 -40px; }

具体情况取决于您的图像.您还可以使用在线精灵生成器来简化过程.

Answer 3

我使用的一个简单技巧是将原始背景图像加倍,确保将悬停的图像放在第一位

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;
    &:hover{
      background: url(../images/next-hover.png) center center no-repeat;
    }
 }

没有性能打击,非常简单

或者,如果您还没有使用SCSS:

.next {
  background: url(../images/next-hover.png) center center no-repeat;
  background: url(../images/next.png) center center no-repeat;        
 }
 .next:hover{
  background: url(../images/next-hover.png) center center no-repeat;
 }

Answer 4

如果你这样做:

#the-button {
background-image: url('images/img.gif');
}
#the-button:before {
  content: url('images/animated-img.gif');
  width:0;
  height:0;
  visibility:hidden;
}

#the-button:hover {
  background-image: url('images/animated-img.gif');
}

这真的有帮助!

看这里:

http://particle-in-a-box.com/blog-post/pre-load-hover-images-css-only

PS - 不是我的工作,而是我找到的解决方案:)