是否可以通过 CSS 将鼠标悬停在另一个元素上来更改 img src

Posted 2023-05-08

【中文标题】是否可以通过 CSS 将鼠标悬停在另一个元素上来更改 img src

【英文标题】：Is it possible to change img src by hover on another element by CSS

【发布时间】：2018-08-08 20:36:35

【问题描述】：

当div元素悬停时，CSS中是否可以更改img src？

<a class="template-image" href="/template-1978944/editor">
 <div class="green"></div>
 <div class="red"></div>
 <div class="orange"></div>
 <img src="/1978944/cover_small.jpg">
</a>

我试过了

a.template-image[href^="/template-1978944"] div.green:hover ~ img 
 content: url(/1978943/cover_small.jpg);"


a.template-image[href^="/template-1978944"] div.red:hover ~ img 
 content: url(/1978942/cover_small.jpg);"

【问题讨论】：

将“内容”更改为“背景”，并为图像本身使用透明图像

Changing image on hover with CSS/html的可能重复

【参考方案1】：

您可以使用url of background-image 尝试一些解决方法：

.orange 
  height:50px;
  background:orange;

.img 
  width:400px;
  height:200px;

.orange:hover + .img 
  background-image:url(https://lorempixel.com/400/300/)!important;

<div class="orange">Hover me!</div>
<div class="img" style="background-image:url(https://lorempixel.com/400/200/)"></div>

您还可以通过使用伪元素而不需要更改标记来创建更改src的错觉（您只需根据您的代码调整用于正确定位新图像的CSS）

.container > div 
  display: inline-block;
  height: 50px;
  width: 50px;


.container 
  position: relative;


.orange 
  background: orange;


.red 
  background: red;


.green 
  background: green;


.orange:hover~img,
.red:hover~img,
.green:hover~img 
  visibility: hidden;


.orange:hover::after 
  content: url(https://lorempixel.com/400/200/);
  position: absolute;
  top: 50px;
  left: 0;


.red:hover::after 
  content: url(https://lorempixel.com/400/220/);
  position: absolute;
  top: 50px;
  left: 0;


.green:hover::after 
  content: url(https://lorempixel.com/400/300/);
  position: absolute;
  top: 50px;
  left: 0;

<div class="container">
  <div class="green"></div>
  <div class="red"></div>
  <div class="orange"></div>
  <br>
  <img src="https://lorempixel.com/400/200/">
</div>

【讨论】：

很遗憾我无法更改 html 代码 :( 这是 SaaS 的一部分，我只能更改 css。

这里应该是 3 个不同的 div，每个应该将 img src 更改为不同的。

@PavelBorodaIgnatenko 确定再次更新 :)

@PavelBorodaIgnatenko 再次检查 ;)

结果应该和@Obsidian Age 建议的完全一样。

【参考方案2】：

你几乎拥有它。将'content'改为'background'，并为图片src使用透明图片

a.template-image[href^="/template-1978944"] div.green:hover ~ img 
 content: url(http://lorempixel.com/100/100/sports/);"


a.template-image[href^="/template-1978944"] div.orange:hover ~ img 
 content: url(http://lorempixel.com/100/100/cats/);"


a.template-image[href^="/template-1978944"] div.red:hover ~ img 
 content: url(http://lorempixel.com/100/100/nature/);"

<a class="template-image" href="/template-1978944/editor">
 <div class="green">GREEN</div>
 <div class="red">RED</div>
 <div class="orange">ORANGE</div>
 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=">
</a>

更新：如果您需要原始图像，请将其图像用作默认背景。

【讨论】：

@PavelBorodaIgnatenko 但在这种情况下，您正在修改初始 src ...我认为您无法更改它？你需要依赖 CSS 吗？ ...因为如果您能够更改 src，那么为什么不简单地使用 div 而不是 img 呢？

@Temani Afif，也非常感谢你。我将结合这两个代码。你和这个。

@PavelBorodaIgnatenko 没有问题 :) 这也是一个很好的解决方案.. 但我认为您无法触摸 HTML 并更改图像 src ;) 因为如果可以的话，您可以拥有更简单的解决方案

【参考方案3】：

仅使用 CSS 无法在悬停元素时更改图像 src 属性。

但是，可以在 CSS 中悬停另一个元素时更改元素的 background-image 属性。如果您愿意使用带有背景的<div> 元素而不是<img> 元素，这将给您同样的效果。

这可以通过 general sibling combinator (~) 来完成，如下所示：

.image 
  height: 100px;
  width: 100px;
  background-image: url('http://via.placeholder.com/100');


.green:hover ~ .image 
  background-image: url('http://via.placeholder.com/100/00ff00');


.red:hover ~ .image 
  background-image: url('http://via.placeholder.com/100/ff0000');


.orange:hover ~ .image 
  background-image: url('http://via.placeholder.com/100/ffa500');

<a class="template-image" href="/template-1978944/editor">
  <div class="green">Green</div>
  <div class="red">Red</div>
  <div class="orange">Orange</div>
  <div class="image"></div>
</a>

---

如果您无法更新 HTML，您将不得不依赖 JavaScript 解决方案。这可以通过首先选择带有 getElementsByTagName() 的图像，然后添加一个函数，在另一个 .onmouseover 期间更新图像的 .src元素。

这可以在下面看到：

let image = document.getElementsByTagName('img')[0];

document.getElementsByClassName('green')[0].onmouseover = function() 
  image.src = 'http://via.placeholder.com/100/00ff00';
;

document.getElementsByClassName('red')[0].onmouseover = function() 
  image.src = 'http://via.placeholder.com/100/ff0000';
;

document.getElementsByClassName('orange')[0].onmouseover = function() 
  image.src = 'http://via.placeholder.com/100/ffa500';
;

<a class="template-image" href="/template-1978944/editor">
  <div class="green">Green</div>
  <div class="red">Red</div>
  <div class="orange">Orange</div>
  <img src="http://via.placeholder.com/100">
</a>

【讨论】：

很遗憾我无法更改 html 代码 :( 这是 SaaS 的一部分，我只能更改 css。

在这种情况下，不幸的是，您将不得不依赖 javascript 来更改悬停时的属性。我也会更新我的答案以将其悬停。

我添加了一个 JavaScript 解决方案 :)