链接伪类（:hover）CSS背景图片有闪动BUG的解决方法

2023-12-15css教程

CSS中的链接伪类:hover可以让当鼠标悬停在链接上时改变链接的外观。然而，当我们将背景图片应用于链接，并使用:hover来改变背景图片时，有可能会出现背景图片闪烁的问题。接下来，我们给出两个示例，演示这个问题以及如何解决它。

问题示例

以下示例HTML代码中有两个链接，每个链接都有自己的背景图片，并在:hover状态下改变背景图片。但是，当鼠标移动到链接上时，背景图片会发生闪烁的问题。

<a href="#" class="link1">Link 1</a>
<a href="#" class="link2">Link 2</a>

<style>
.link1 {
  background-image: url('link1.png');
  width: 200px;
  height: 100px;
}

.link1:hover {
  background-image: url('link1-hover.png');
}

.link2 {
  background-image: url('link2.png');
  width: 200px;
  height: 100px;
}

.link2:hover {
  background-image: url('link2-hover.png');
}
</style>

解决方法

使用CSS预加载

使用CSS预加载可以缓存所有的背景图片，避免在链接hover时加载图片而导致的闪烁。可以使用以下代码：

<head>
  <link rel="preload" href="link1.png" as="image">
  <link rel="preload" href="link1-hover.png" as="image">
  <link rel="preload" href="link2.png" as="image">
  <link rel="preload" href="link2-hover.png" as="image">
</head>

<body>
  <a href="#" class="link1">Link 1</a>
  <a href="#" class="link2">Link 2</a>

  <style>
    .link1 {
      background-image: url('link1.png');
      width: 200px;
      height: 100px;
    }

    .link1:hover {
      background-image: url('link1-hover.png');
    }

    .link2 {
      background-image: url('link2.png');
      width: 200px;
      height: 100px;
    }

    .link2:hover {
      background-image: url('link2-hover.png');
    }
  </style>
</body>

在:visited伪类中使用背景图片

在:visited伪类中使用相同的背景图片可以解决这个问题，因为浏览器只需要为每个链接缓存一次背景图片。可以使用以下代码：

<a href="#" class="link1">Link 1</a>
<a href="#" class="link2">Link 2</a>

<style>
.link1 {
  background-image: url('link1.png');
  width: 200px;
  height: 100px;
}

.link1:visited {
  background-image: url('link1.png');
}

.link1:hover {
  background-image: url('link1-hover.png');
}

.link2 {
  background-image: url('link2.png');
  width: 200px;
  height: 100px;
}

.link2:visited {
  background-image: url('link2.png');
}

.link2:hover {
  background-image: url('link2-hover.png');
}
</style>

以上就是两种解决方案，可以根据自己的喜好选择适合自己的方法。

The End