Javascript 悬停不工作时更改背景图像

我需要更改正常图像悬停时的背景图像。（请不要建议我将其放入普通背景图像中）

我用z索引值尝试了这种方法，但它不起作用。这里是它需要预加载图像，所以用户根本看不到图像加载

img{
宽度：120px；
位置：相对位置；
z指数：-1；
}
img：悬停{
背景图像：url（'https://i.ibb.co/bsQL6SK/media13-3-blue.png');
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}

---

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

img {
  width: 120px;
}

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

下面是一个演示：

---

参考：

您可以使用jquery悬停事件，更改图像URL，并将z索引更改为0，直到用户可以悬停它

标题
img{
宽度：120px；
位置：相对位置；
z指数：0；
}
img：悬停{
背景图像：img[返回]；
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
$（'img'）。悬停（函数（e）{
如果（e.type=='mouseenter'）{
$（this.attr（'src'，'https://i.ibb.co/bsQL6SK/media13-3-blue.png');
}否则{
$（this.attr（'src'，'https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png');
}
});

html

---

如果您仍然面临这个问题，请告诉我。

您可以使用和来实现它

img{
宽度：120px；
位置：相对位置；
}

---

对于纯css解决方案，您必须将图像包装在div中，并将背景图像放在before/after元素上。像这样的。我添加了背景色，只是为了更清楚地了解正在发生的事情。解决方案也取决于你真正想要什么，对我来说有点不清楚

.container{
宽度：120px；
位置：相对位置；
显示：内联块；
}
.货柜：之后{
内容：''；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
显示：无；
背景图像：url（'https://cdn.motor1.com/images/mgl/Rzxom/s3/lamborghini-sian-lead.jpg');
背景重复：无重复；
背景尺寸：封面；
z指数：1；
}
.容器：悬停：之后{
显示：块；
}
.集装箱img{
宽度：100%；
身高：100%；
}

---

您可以使用两个图像标签，默认情况下隐藏一个，并在悬停状态下切换这些标签的显示。像这样的

const c=document.querySelector（“容器”）；
const img1=document.querySelector（#container.off hover）；
const img2=document.querySelector（“悬停的容器”）；
c、 addEventListener（“鼠标悬停”，函数（）{
img1.style.display=“无”；
img2.style.display=“内联块”；
})
c、 addEventListener（“mouseout”，function（））{
img1.style.display=“内联块”；
img2.style.display=“无”；
})

img{
宽度：120px；
位置：相对位置；
}
.悬停{
显示：无；
}

---

我有点不明白你的意思（请不要建议我把它放在正常的背景图像中），如果我误解了，请原谅，我做了你想忽略的事情

不使用JavaScript，只使用简单的CSS，我可以看到两种方法（我是初学者）

在CSS中使用图像作为背景图像并相应地显示/隐藏，但这不是您想要的

使用带有img标记的HTML中的两个图像，您可以使用标记甚至div来包装它

但要确保两个图像的尺寸相同

img{
宽度：200px；
}
最后一个孩子{
宽度：200px；
显示：无；
}
a:悬停img:最后一个孩子{
宽度：200px；
显示：块；
}
a:悬停img:第一个孩子{
宽度：200px；
显示：无；
}

我很好奇，是什么让你认为背景图像会通过图像显示出来？你做了什么并不重要。这是一个。。。等等。。。背景图像。根据定义，它是在内容的后面，而内容恰好是一个。。。形象。这就是“背景”的意思。蓝色的意思是，我有一个色码。所以我需要用那个。@Janath你可以用色调旋转，饱和值来匹配你需要的蓝色。是的，我错了！我需要完全相同的颜色#05adef@Janath这里有一个转换颜色的指南：不能这样做bcz im使用WordPress这太棒了！但背景图像的大小不对？让我检查一下@Janath@Janath上面的代码是正确的，您的图像就像两个图像，一个是透明背景，另一个是中间的图像。所以，如果你改变了，它将按预期工作。这同样适用于您的第一张图像，如果不是120px，则徽标本身也是如此。我改变了图像来展示它。明白了。我们不能隐藏第一张图片吗？@Janath不，让我给你看看。您需要编辑图像。

<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" onmouseover="this.src='https://i.ibb.co/bsQL6SK/media13-3-blue.png'" onmouseout="this.src='https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png'" alt="">

img{
  width: 120px;
}