[解決済み] How to change source of <img> tag on hover?

Question

I need to change <img> source URL on hover .

I have tried this but won'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 appreciated.

Update:

This only works for Webkit / Google Chrome.

どのように解決するのですか？

htmlとcssだけでは、画像のsrcを変更することはできません。imgタグをdivタグに置き換えると、以下のように背景に設定されている画像を変更することができるかもしれません。

div {
    background: url('http://dummyimage.com/100x100/000/fff');
}
div:hover {
    background: url('http://dummyimage.com/100x100/eb00eb/fff');
}

また、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);" />