正文 

当前位置： 首页 > 知识 >

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

     2023-05-08     39

关键词：

【中文标题】是否可以通过 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 属性。如果您愿意使用带有背景的&lt;div&gt; 元素而不是&lt;img&gt; 元素，这将给您同样的效果。

这可以通过 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 解决方案 :)

如何通过将鼠标悬停在同一页面上的图像上来触发 CSS 动画按钮

】如何通过将鼠标悬停在同一页面上的图像上来触发CSS动画按钮【英文标题】：Howtotriggeracssanimatedbuttonbyhoveringoveranimageonthesamepage【发布时间】：2013-08-2501:17:58【问题描述】：我的网站出现问题。在主页上，我有一张图片。图片... 查看详情

jQuery将div悬停在另一层下方

...athanotherlayer【发布时间】：2011-07-0922:45:19【问题描述】：是否可以忽略所有“高于”元素的div，这些div已通过jQuery绑定到它们？例如，我有一个绑定了悬停事件的元素A，但还有其他元素B、C、D位于元素A上方“绝对定位”。因此... 查看详情

通过 CSS 将鼠标悬停在父元素上时显示 :after

...:57:06【问题描述】：当我将鼠标悬停在父元素本身上时，是否可以display:block;:after伪元素？#myDivposition:relative;width:50px;height:50px;border-style:soli 查看详情

悬停时停止 CSS 动画

...菜单(#drop)时，会等待几秒钟，然后再向上移出视图。您可以通过将鼠标悬停在页面顶部的不同元素(#hover)上来返回菜单。它非常适合我，但有一个问题。当您加载页面时，您仍将鼠标悬停在#hover上，#drop在等待完成后会向上移动... 查看详情

如何将鼠标悬停在子元素上而不悬停在 CSS 中的父元素上？

...theparentinCSS?【发布时间】：2017-04-1909:59:51【问题描述】：是否可以将鼠标悬停在嵌套的子元素上而不触发父元素上的悬停？在下面的示例中，您会看到当您将鼠标悬停在子对象上时，父悬停效果仍然处于活动状态。我想对此进行... 查看详情

悬停和鼠标悬停的不同 CSS 过渡延迟？

...verandmouseout?【发布时间】：2011-08-2017:38:00【问题描述】：是否可以在“状态”之间使用具有不同延迟切换的CSS3转换？例如，我试图让一个元素在悬停时立即更高，然后在“mouseout”上等待一秒钟，然后再滑回元素的初始高度。演... 查看详情

当我将鼠标悬停在另一个 div 上时，如何使文本出现在一个 div 中？

】当我将鼠标悬停在另一个div上时，如何使文本出现在一个div中？【英文标题】：HowdoImaketextappearinadivwhenIhoveroveranother?【发布时间】：2021-02-0313:38:15【问题描述】：我已经为我的网站创建了一个主页，其中包含所有方面的概述。... 查看详情

悬停在鼠标离开后仍然存在的 CSS 样式

...移开或悬停在另一个主条目上，悬停就会丢失。我想知道是否有某种方法可以在鼠标离开后轻松保持这种悬停状态。这不是我可以扔掉的东西，所以我非常有兴趣扩展它以支持即使在鼠标离 查看详情

jQuery - 具有悬停效果的多个项目

...】：在CSS中，我有几个带有悬停效果的DIV项目。如果我将鼠标悬停在一个元素上，则该元素具有另一种背景颜色。如果我将鼠标悬停在另一个项目上，则之前选择的项目具有默认背景颜色，而不悬停。如何使用jQuery做到这一点？... 查看详情

您可以将 CSS 悬停效果应用于不是悬停元素的子元素的元素吗？

...【发布时间】：2011-06-0108:16:56【问题描述】：我不确定这是否可能。我现在正在使用CSS3动画，我需要将鼠标悬停在会影响页面上其他div元素（非子元素）的链接上。我不确定是否有解决方法。<stylet 查看详情

是否可以将 $(this) 与非子元素结合使用？

】是否可以将$(this)与非子元素结合使用？【英文标题】：Isitpossibletocombine$(this)withanonchildelement?【发布时间】：2012-09-2716:43:46【问题描述】：我有一个&lt;divs&gt;的列表与同一类。每个&lt;li&gt;中有两个&lt;divs&gt;。... 查看详情

：悬停在一个元素上来改变另一个？

】：悬停在一个元素上来改变另一个？【英文标题】：:hoveronanelementtochangeanother?【发布时间】：2014-02-0216:29:38【问题描述】：我有这个条形图，当我悬停在特定条形图上时，我想将“测试div”更改为不同的背景颜色和内容本身。... 查看详情

使（图像）向右移动并旋转 45 度，同时将鼠标悬停在另一个（图像）上

】使（图像）向右移动并旋转45度，同时将鼠标悬停在另一个（图像）上【英文标题】：makea(image)movetotherightandrotate45degreeswhilehoveringoveranother(image)【发布时间】：2017-04-2316:55:51【问题描述】：我想将鼠标悬停在图像（音乐专辑）... 查看详情

将鼠标悬停在一个上但影响另一个 CSS

...做（转换：比例（1.2）；过渡：所有0.9秒缓进出；））。是否可以使用css或也需要javascript？我的代码：<!DOCTYPEht 查看详情

使用 css 将鼠标悬停在第一个子元素上时更改其他子元素

】使用css将鼠标悬停在第一个子元素上时更改其他子元素【英文标题】：Changingotherchildelementswhenhoveringoverfirstchildusingcss【发布时间】：2013-02-0502:18:06【问题描述】：我试图在div的第一个孩子上使用悬停来影响第三个孩子。有谁知... 查看详情

在悬停时显示一个 DIV，但在另一个悬停的 DIV 内。使用 CSS

...2-2804:24:27【问题描述】：我正在尝试获取它，因此当我将鼠标悬停在一个DIV上时，另一个DIV将显示在该DIV内但显示在当前内容上。因此，如果我有一个500x500像素的DIV并显示书籍封面， 查看详情

将 jqueryui 手风琴事件处理程序从“单击”动态更改为“鼠标悬停”

】将jqueryui手风琴事件处理程序从“单击”动态更改为“鼠标悬停”【英文标题】：Dynamicallychangingjqueryuiaccordioneventhandlerfrom"click"to"mouseover"【发布时间】：2011-05-2120:10:45【问题描述】：我有一种情况，我希望能够... 查看详情

悬停保持活动状态，直到鼠标悬停在另一个可悬停对象上

】悬停保持活动状态，直到鼠标悬停在另一个可悬停对象上【英文标题】：Hoverstaysactive,untilmouseoveranotherhoverableobject【发布时间】：2013-05-1909:19:51【问题描述】：假设我有三个盒子。每个都可以悬停，当悬停时，它们的背景颜色... 查看详情