I need to change the <img> source url on hover.
I tried but doesn't work:
HTML
< img id =“my-img”src =“http://dummyimage.com/100x100/000/fff”/>
CSS
#my-img:hover {
content:url('http://dummyimage.com/100x100/eb00eb/fff');
}
Any help would be greatly appreciated.
renew:
This only works with Webkit/Google Chrome.
solution
With only html and css, it's not possible to change the src of the image. If you replace the img tag with a div tag then you can change the image set as background like
div {
background:url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
background:url('http://dummyimage.com/100x100/eb00eb/fff');
}
If you think you can use some javascript code then you should be able to change the src of the img tag as follows
function hover(element){
element.setAttribute('src' ,'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element){
element.setAttribute('src','http://dummyimage.com/100x100/000/fff');
}
and the html is
< img id =“my-img”src =“http://dummyimage.com/100x100/000/fff”onmouseover =“hover(this);” onmouseout =“unhover(this);” />
The address of this article: IT House » CSS: Change image src on img:hover