SVG背景在懸停時閃爍一次-有解無憂

我有一個帶有 svg 背景的按鈕，它的懸停也有一個 svg 背景。當我在頁面加載后第一次將滑鼠懸停在它上面時，會出現閃爍，但隨后的任何懸停都沒有閃爍。我認為這可能是加載問題，但即使我在頁面上單獨加載兩個影像或預加載影像，此閃爍仍然會發生，因此它不是加載問題。到底是怎么回事？

.minus{
    background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
background-size: cover;
    border: 0;
    display: block;
    height: 20px;
    width: 20px;
}

.minus:hover{
    background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

<button class="minus">

uj5u.com熱心網友回復：

這是因為未加載隱藏元素/資產（非活動選擇器或display: none等）。您必須手動預加載它。

這里有一些想法：

注意：服務器https://www.svgrepo.com/有時會回應 403 Forbidden。所以你可能看不到任何影像。（見控制臺）

預加載 CSS

.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

body:after {
  /* display: none -- does not work anymore due to latest optimizations.*/
  display: block;
  overflow: hidden;
  width: 0;
  height: 0;
  content: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

<button class="minus"></button>

這只是一種方法。這可能取決于您的框架。您也可以在 JavaScript 中執行此操作（加載影像）。或者換個思路：使用平鋪的精靈作為（一個）影像，然后在懸停時移動背景位置。或者一次加載兩者。

使用精靈

.minus {
  background: 
    url(https://www.svgrepo.com/show/294589/shuffle-random.svg),
    url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
  background-size: cover;
  background-position: 0, 20px;
  background-repeat: no-repeat;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background-position: 0;
}

<button class="minus"></button>

在 HTML 中預加載影像

.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

#preload {
  /* In this case / context display hidden works. */
  display: none;
}

<div id="preload">
  <img src="https://www.svgrepo.com/show/240096/shuffle-random.svg">
</div>

<button class="minus"></button>

在 JavaScript 中預加載影像

[
  'https://www.svgrepo.com/show/294589/shuffle-random.svg',
  'https://www.svgrepo.com/show/240096/shuffle-random.svg',
].forEach((imageUrl) => {
  new Image().src = imageUrl;
});

.minus {
  background: url(https://www.svgrepo.com/show/294589/shuffle-random.svg);
  background-size: cover;
  border: 0;
  display: block;
  height: 20px;
  width: 20px;
}

.minus:hover {
  background: url(https://www.svgrepo.com/show/240096/shuffle-random.svg);
}

<button class="minus"></button>

使用關鍵字搜索網路，例如：css 背景影像懸停閃爍預加載等

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/410811.html

標籤：

上一篇：來自物件的Javascript觸發函式

下一篇：為什么svganimateTransform只在第一個專案上激活？