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

【问题标题】：Change background image when hover not working悬停不工作时更改背景图像
【发布时间】：2020-01-21 07:08:55
【问题描述】：

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

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

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;
}

&lt;img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt=""&gt;

【问题讨论】：

我很好奇是什么让您认为背景图像会通过图像显示？你做什么z-index都没有关系。这是一个......等待它......背景图片。根据定义，它位于内容的后面，而内容恰好是……图像。这就是“背景”的意思。

标签： javascript jquery html css

【解决方案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

【讨论】：

蓝色表示，我有颜色代码。所以我需要使用那个。
@Janath 您可以使用色调旋转、饱和值来匹配您需要的蓝色。
是的，我的错！我需要完全相同的颜色。 #05adef
@Janath 这是转换颜色的指南：stackoverflow.com/questions/29037023/…

【解决方案2】：

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

.container {
  width: 120px;
  position: relative;
  display: inline-block;
}

.container:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  background-image: url('https://cdn.motor1.com/images/mgl/Rzxom/s3/lamborghini-sian-lead.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.container:hover:after {
  display: block;
}

.container img {
  width: 100%;
  height: 100%;
}

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

编辑

如您所见，福克斯新闻徽标很小，但您的图像更大，我添加了绿色背景以使其更清晰（之前是透明的）。您需要做的是编辑，使徽标为全尺寸。有意义吗？

【讨论】：

这太棒了！但是背景图片大小不对？
让我检查一下@Janath
@Janath 上面的代码是正确的，您的图像就像两张图像，一张具有透明背景，另一张具有较小的中心图像。因此，如果您更改它，它将按预期工作。您的第一张图片也是如此，如果不是 120 像素，徽标本身也是如此。我更改了图像以展示它。
明白。我们不能隐藏第一张图片吗？
@Janath 不，让我告诉你。您需要编辑图片。

【解决方案3】：

html

<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="">

css

img{
  width: 120px;
}

working demo

如果您仍然遇到问题，请告诉我。

【讨论】：

【解决方案4】：

您可以使用onmouseover 和onmouseout 来实现它。

img{
  width: 120px;
  position: relative;
}

&lt;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';" /&gt;

【讨论】：

【解决方案5】：

您可以使用两个图像标签，默认隐藏一个并在悬停时切换显示。像这样？

const c = document.querySelector("#container");
const img1 = document.querySelector("#container .off-hover");
const img2 = document.querySelector("#container .on-hover");

c.addEventListener("mouseover", function(){
  img1.style.display = "none";
  img2.style.display = "inline-block";
})

c.addEventListener("mouseout", function(){
  img1.style.display = "inline-block";
  img2.style.display = "none";
})

img{
  width: 120px;
  position: relative;
}

.on-hover {
  display: none;
}

<div id="container">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="off-hover" alt="">
  <img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" class="on-hover">
</div>

【讨论】：

不能那样做 bcz im 使用 wordpress

【解决方案6】：

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

<html>
<head>
	<title>title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<img src="https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png" alt="">
</body>
<style>
img{
  width: 120px;
  position: relative;
    z-index: 0;
}

img:hover{
     background-image: img[back];
      background-position: center;
  background-repeat: no-repeat; 
  background-size: cover;
}
</style>
<script>
$('img').hover(function (e) {
	if(e.type == 'mouseenter'){
		$(this).attr('src', 'https://i.ibb.co/bsQL6SK/media13-3-blue.png');
    }else{
        $(this).attr('src', 'https://cdn.freebiesupply.com/logos/large/2x/fox-news-logo-png-transparent.png');
    }
});
</script>
</html>

【讨论】：

【解决方案7】：

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

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

在 CSS 中将图像用作背景图像并相应地显示/隐藏，但这不是您想要的。
使用带有 img 标签的 HTML 中的两个图像，您可以用标签甚至 div 包装它。

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

img{
  width: 200px;
  
}


a img:last-child {
  width: 200px;
  display: none;  
}
a:hover img:last-child {
  width: 200px;
  display: block;  
}
a:hover img:first-child {
  width: 200px;
  display: none;  
}

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

【讨论】：