悬停不起作用时更改背景图像

Question

我需要在普通图像悬停时更改背景图像。（请不要建议我把它放到普通的背景图片中）

我使用 z-index 值尝试过这种方式，但它不起作用。这是填充它需要预加载图像，因此用户根本看不到图像加载。

img{
  width: 120px;
  position: relative;
    z-index: -1;
}

img:hover{
     background-image: url('https://i.ibb.co/bsQL6SK/media13-3-blue.png');
      background-position: center;
  background-repeat: no-repeat; 
  background-size: cover;
}

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">

Answer 1

我检查了两个图像，似乎您需要在悬停时使用蓝阶图像。如果是这种情况，您可以使用过滤器：

img {
  width: 120px;
}

img:hover {
  filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

这是一个演示：https : //jsfiddle.net/lotusgodkk/x2ywL6he/5/

参考：https : //developer.mozilla.org/en-US/docs/Web/CSS/filter