css：避免图像悬停第一次闪烁 [英] css: avoid image hover first time blinking

问题描述

我有一个锚点，当它悬停在含有 background-image 的类 class-btn 时， C>。

当盘旋时，它有

  a.class-btn： hover 
 {
 background-image（'path / to / image-hovered.jpg'）; 
} 
  

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

我试图搜索堆栈溢出的类似问题，但没有运气。 p>

刚添加：

• 我应该预加载悬停的图片吗？如何？


• 我应该玩z-index还是不透明？

它适用于所有浏览器，因此该解决方案适用于所有浏览器。 h2_lin>解决方案

避免这种情况的最简单方法是利用图像精灵。要获得一个好的概述，请查看这篇CSS技巧文章。

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

  a.class-btn {background：url（'path / to / image.jpg' ）0 0无重复; } 
 a.class-btn：hover {background-position：0 -40px; } 
  

具体取决于您的图片。您还可以使用在线 sprite生成器来简化过程。

I have an anchor that changes its background image when hovered with a class class-btn that contains a background-image.

When hovered, it has

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

When the page loads the first time and you hover this button the first time, it blinks (it takes about half a second to download the hovered image). How to avoid that blinking without JavaScript (only simple css and html is allowed)?

I tried to search Stack Overflow for the similar question, but with no luck.

Just added:

• Should I "preload" the hovered image? How?
• Should I play with z-index or opacity?

It happens with all browsers and thus the solution should work for all browsers.

解决方案

The easiest way to avoid this is to make use of image sprites. For a good overview, check out this CSS Tricks article.

That way, you not only solve the flicker problem you're seeing, but will also reduce the number of HTTP requests. Your CSS will look something like:

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

The specifics will depend on your images. You can also make use of an online sprite generator to make the process easier.

这篇关于css：避免图像悬停第一次闪烁的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！