首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在悬停时更改<img>标签的来源?

如何在悬停时更改<img>标签的来源?
EN

Stack Overflow用户
提问于 2013-08-03 19:11:34
回答 20查看 561.2K关注 0票数 138

我需要更改hover上的<img>源地址。

我已经尝试过了,但不起作用:

HTML

代码语言:javascript
复制
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CSS

代码语言:javascript
复制
#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

任何帮助都将不胜感激。

更新:

这只适用于Webkit / Google Chrome。

EN

回答 20

Stack Overflow用户

回答已采纳

发布于 2013-08-03 19:27:46

只有html和css,改变图片的src是不可能的。如果将img标记替换为div标记,则可以更改设置为背景的图像,如下所示

代码语言:javascript
复制
div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

如果您认为可以使用一些javascript代码,那么您应该能够更改img标记的src,如下所示

代码语言:javascript
复制
function hover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}

function unhover(element) {
  element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
代码语言:javascript
复制
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />

票数 173
EN

Stack Overflow用户

发布于 2014-05-19 17:17:26

我已经修改了一些与Patrick Kostjens相关的更改。

代码语言:javascript
复制
<a href="#">
<img src="http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png" 
onmouseover="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/red-bird-icon.png'"
onmouseout="this.src='http://icons.iconarchive.com/icons/fasticon/angry-birds/128/yellow-bird-icon.png'"
border="0" alt=""/></a>

演示

http://jsfiddle.net/ssuryar/wcmHu/429/

票数 127
EN

Stack Overflow用户

发布于 2016-05-27 22:13:10

这里是使用纯CSS的另一种方法。我们的想法是在HTML标记中包括这两个图像,并相应地在上显示或隐藏这些图像:hover

HTML

代码语言:javascript
复制
<a>
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_15-128.png" /> 
   <img src="https://cdn4.iconfinder.com/data/icons/imoticons/105/imoticon_12-128.png" />
</a>

CSS

代码语言:javascript
复制
a img:last-child {
  display: none;  
}
a:hover img:last-child {
  display: block;  
}
a:hover img:first-child {
  display: none;  
}

jsfiddle:https://jsfiddle.net/m4v1onyL/

请注意,为了正确显示,所使用的图像具有相同的尺寸。此外,这些图像文件大小非常小,因此在这种情况下加载多个图像不是问题,但如果您希望切换大尺寸图像的显示,则可能是问题。

票数 34
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18032220

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档