☰

ホバー時にタグのソースを変更するにはどうすればいいですか? 質問する

tag-icon • tag-icon html css
ホバー時にタグのソースを変更するにはどうすればいいですか? 質問する

<img>のソース URLを変更する必要がありますhover。

これを試してみましたが、うまくいきませんでした:

html

<img id="my-img" src="http://dummyimage.com/100x100/000/fff"/>

CS

#my-img:hover {
    content: url('http://dummyimage.com/100x100/eb00eb/fff');
}

jsFiddle

ご協力いただければ幸いです。

アップデート：

これは Webkit / Google Chrome でのみ機能します。

ベストアンサー1

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

おすすめ記事