CSS: Change image src on img:hover

 

 

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'）; 
} 
  

jsFiddle

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