Html CSS：在 img:hover 上更改图像 src
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18032220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Change image src on img:hover
提问by Hamed Kamrava
I need to change <img>source URL on hover.
我需要<img>在hover.
I have tried this but won't work :
我试过这个，但不会工作：
HTML
HTML
<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>
CSS
CSS
#my-img:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Any help would be appreciated.
任何帮助，将不胜感激。
Update:
更新：
This only works for Webkit / Google Chrome.
这仅适用于 Webkit / Google Chrome。
回答by Ashis Kumar
With only html and css, its not posible to change the src of image. If you do replace the img tag with div tag, then you might be able to change the image that is set as the background as like
仅使用 html 和 css，无法更改图像的 src。如果您确实用 div 标签替换了 img 标签，那么您也许可以像这样更改设置为背景的图像
div {
background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
And if you think you can use some javascript code then you should be able to change the src of the img tag as below
如果你认为你可以使用一些 javascript 代码，那么你应该能够改变 img 标签的 src 如下
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />回答by Surya R Praveen
I have modified few changes related to Patrick Kostjens.
我修改了与 Patrick Kostjens 相关的一些更改。
<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>
DEMO
演示
回答by MichaelC
I had a similar problem but my solution was to have two images, one hidden (display:none) and one visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block. (Might use 'inline' instead depending on your circumstances)
我有一个类似的问题，但我的解决方案是有两个图像，一个隐藏（显示：无）和一个可见。将鼠标悬停在周围跨度上时，原始图像更改为 display:none，另一个图像更改为 display:block。（可能会根据您的情况使用“内联”）
This example uses two span tags instead of images so you can see the result when running it here. I didn't have any online image sources to use unfortunately.
此示例使用两个 span 标记而不是图像，因此您可以在此处运行它时看到结果。不幸的是，我没有任何在线图像资源可供使用。
#onhover {
display: none;
}
#surround:hover span[id="initial"] {
display: none;
}
#surround:hover span[id="onhover"] {
display: block;
}<span id="surround">
<span id="initial">original</span>
<span id="onhover">replacement</span>
</span>回答by putvande
What you could do is cheat a little bit by setting widthand heightto 0 to hide the actual image and apply some CSS to do what you want:
你可以做的是通过设置width和height0 来隐藏实际图像并应用一些 CSS 来做你想做的事情：
#aks {
width:0px;
height:0px;
background:url('http://dummyimage.com/100x100/000/fff');
padding:50px;
}
#aks:hover {
background: url('http://dummyimage.com/100x100/eb00eb/fff');
}
And the padding making the imgtag the size you want it to have (half the size of your actual image).
填充使img标签达到您想要的大小（实际图像大小的一半）。
回答by jcruz
Here is an alternate approach using pure CSS. The idea is to include both the images in the HTML markup and have these displayed or hidden accordingly on :hover
这是使用纯 CSS 的另一种方法。这个想法是将两个图像都包含在 HTML 标记中，并在 :hover 上相应地显示或隐藏这些图像
HTML
HTML
<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
CSS
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/
jsfiddle: https://jsfiddle.net/m4v1onyL/
Note that the images used are of the same dimensions for proper display. Also, these images file sizes are quite small so loading multiple is not an issue in this case but may be if you are looking to toggle display of large sized images.
请注意，为了正确显示，所使用的图像具有相同的尺寸。此外，这些图像文件大小非常小，因此在这种情况下加载多个不是问题，但如果您希望切换大尺寸图像的显示，则可能会出现问题。
回答by Anonymous
Concerning semantics, I do not like any solution given so far. Therefore, I personally use the following solution:
关于语义，我不喜欢迄今为止给出的任何解决方案。因此，我个人使用以下解决方案：
.img-wrapper {
display: inline-block;
background-image: url(https://www.w3schools.com/w3images/fjords.jpg);
}
.img-wrapper > img {
vertical-align: top;
}
.img-wrapper > img:hover {
opacity: 0;
}<div class="img-wrapper">
<img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="image" />
</div>This is a CSS only solution with good browser compatibility. It makes use of an image wrapper that has a background which is initially hidden by the image itself. On hover, the image is hidden through the opacity, hence the background image becomes visible. This way, one does not have an empty wrapper but a real image in the markup code.
这是一个只有 CSS 的解决方案，具有良好的浏览器兼容性。它使用一个图像包装器，该包装器具有最初被图像本身隐藏的背景。在悬停时，图像通过不透明度隐藏，因此背景图像变得可见。这样，标记代码中就没有空的包装器，而是一个真实的图像。
回答by Chalisi
I have one more solution. If anybody uses AngularJs : http://jsfiddle.net/ec9gn/30/
我还有一个解决方案。如果有人使用 AngularJs：http: //jsfiddle.net/ec9gn/30/
<div ng-controller='ctrl'>
<img ng-mouseover="img='eb00eb'" ng-mouseleave="img='000'"
ng-src='http://dummyimage.com/100x100/{{img}}/fff' />
</div>
The Javascript :
Javascript：
function ctrl($scope){
$scope.img= '000';
}
No CSS ^^.
没有 CSS ^^。
回答by e-kinst
I had similar problem - I want to replace picture on :hover but can't use BACKGRUND-IMAGE due to lack of Bootstrap's adaptive design.
我遇到了类似的问题 - 我想替换 :hover 上的图片，但由于缺乏 Bootstrap 的自适应设计而无法使用 BACKGRUND-IMAGE。
If you like me only want to change the picture on :hover (but not insist of change SRC for the certain image tag) you can do something like this - it's CSS-only solution.
如果您喜欢我只想更改 :hover 上的图片（但不坚持更改特定图像标签的 SRC），您可以执行以下操作 - 这是仅使用 CSS 的解决方案。
HTML:
HTML：
<li>
<img src="/picts/doctors/SmallGray/Zharkova_smallgrey.jpg">
<img class="hoverPhoto" src="/picts/doctors/Small/Zharkova_small.jpg">
</li>
CSS:
CSS：
li { position: relative; overflow: hidden; }
li img.hoverPhoto {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
opacity: 0;
}
li.hover img { /* it's optional - for nicer transition effect */
opacity: 0;
-web-kit-transition: opacity 1s ease;
-moz-transition: opacity 1s ease;li
-o-transition: opacity 1s ease;
transition: opacity 1s ease;
}
li.hover img.hoverPhoto { opacity: 1; }
If you want IE7-compatible code you may hide/show :HOVER image by positioning not by opacity.
如果您想要与 IE7 兼容的代码，您可以通过定位而不是不透明度来隐藏/显示 :HOVER 图像。
回答by Naveen Kumar Alonekar
Agree with AshisKumar's answer,
there is a way to change image url on mouse over by using jQuery functionality as below:
同意 AshisKumar 的回答，
有一种方法可以使用 jQuery 功能更改鼠标悬停时的图像 url，如下所示：
$(function() {
$("img")
.mouseover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "over.gif";
$(this).attr("src", url1); //URL @the time of mouse over on image
})
.mouseout(function() {
var src = $(this).attr("src").replace("over", "");
$(this).attr("src", url2); //default URL
});
});
回答by sulfureous
Since you can't change the srcwith CSS: If jQuery is an option for you, check this fiddle.
因为你不能src用 CSS改变：如果 jQuery 是你的一个选择，检查这个小提琴。
Demo
演示
$('#aks').hover(
function(){
$(this).attr('src','http://dummyimage.com/100x100/eb00eb/fff')
},
function(){
$(this).attr('src','http://dummyimage.com/100x100/000/fff')
}
)
It's basically using the .hover()method... it takes two functions to make it work. When you enter the hover and when you exit it.
它基本上是使用.hover()方法......它需要两个功能才能使其工作。当您进入悬停和退出时。
We are using the .attr(short for attribute) to change the srcattribute.
我们正在使用.attr（属性的缩写）来更改src属性。
It's worth to note that you need the jQuery library included like in the fiddle to make this work.
值得注意的是，您需要像小提琴一样包含 jQuery 库才能完成这项工作。
