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（）... etc。

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

Answer 2

避免这种情况的最简单方法是使用图像精灵。有关概述，请查看this CSS Tricks article。

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

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

具体细节取决于您的图像。您还可以使用在线sprite generator来简化流程。

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

P.S - 不是我的工作，而是我找到的解决方案：）

Answer 5

这是一个非CSS解决方案：如果悬停图像位于一个目录中且具有通用命名约定，例如包含子字符串＆＃39; -on。＆＃39;，则可以选择文件将其命名并将其作为一系列内容放入HTML中：

<img src='...' style='display: none' />

Answer 6

@Kristian应用隐藏内容的方法：url（）＆＃39;在身体似乎没有在Firefox 48.0（OS X）中工作之后。

然而，改变＆＃34;显示：无;＆＃34;类似于：

body:after {
 position: absolute; overflow: hidden; left: -50000px;
 content: url(/path/to/picture-1.jpg) url(/path/to/picture-2.jpg);
}

......为我做了诀窍。也许Firefox不会加载隐藏的图像，或者它可能与渲染（？）有关。

Answer 7

如果它们的尺寸相同，则有一种可能性是将两个图像直接绘制在彼此之上，顶部图像的CSS :hover类具有display: none;

这样两个图像都会被预加载，但悬停会使第二个图像可见。

Answer 8

您可以预加载图片

function preloadImages(srcs, imgs, callback) {
var img;
var remaining = srcs.length;
for (var i = 0; i < srcs.length; i++) {
    img = new Image();
    img.onload = function() {
        --remaining;
        if (remaining <= 0) {
            callback();
        }
    };
    img.src = srcs[i];
    imgs.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
var images = [];
preloadImages(imageSrcs, images, myFunction);

Answer 9

“加倍原始背景图片”技巧对我不起作用所以我使用了另一个css技巧：

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

Answer 10

该技术对我来说效果很好，不仅可以确保已预加载了悬停图像，而且还可以随时显示它。（大多数其他解决方案都依赖于将鼠标悬停在背景图片上，无论预加载多少图片，浏览器似乎都需要花费一些时间才能找出来。）

使用两个图像在容器上创建：before和：after伪元素，但隐藏要在悬停时看到的图像。然后，在悬停时切换可见性。

只要它们共享相同的大小和定位规则，就应该看到整齐的交换。

.image-container {
    &:before { display: block; background-image: url(uncovered.png); }
    &:after { display: none; background-image: url(uncovered.png); }
}
.image-container:hover {
    &:before { display: none; }
    &:after { display: block; }
}

Answer 11

我遇到了同样的问题。在尝试了与 css 相关的所有内容后，我无法解决问题。最终解决问题的是模拟有人悬停元素。 css是正常的。

CSS

#elemName{
 /* ... */
} 
#elemName:hover{
 /* change bg image */
}

JS

var element = document.getElementById('elemName');
var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});
element.dispatchEvent(event);

Answer 12

只需更改背景图片的大小，而不是它的来源！所以......

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

Answer 13

执行此操作的最佳方法是将图像插入网页并将显示设置为无。

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

13 个答案: