ホバー時に画像ソースを変更するにはどうすればよいですか?

カーソルを合わせたときに画像ソースを変更する: 総合ガイド

< のソース URL を動的に変更する必要があるシナリオが発生する場合があります。 ;画像>マウスを上に置くとタグが表示されます。これは簡単な作業のように思えますが、思っているほど簡単に達成できるものではありません。

CSS の落とし穴

最初は、CSS の content プロパティを使用して置き換えることを試みるかもしれません。次のコードに示すように、画像ソース:

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

ただし、このアプローチは次の場合にのみ機能します。 Google Chrome などの Webkit ブラウザ。 Firefox や Safari などの他の主要なブラウザは、このコンテキストの content プロパティを無視します。

HTML と CSS の代替手段

CSS がオプションでない場合は、 を置き換えることを検討してください。 <div> でタグ付けします。タグ。

<div>の背景画像を設定することで、

<div>

#my-div {
    background-image: url('http://dummyimage.com/100x100/000/fff');
}

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

JavaScript ソリューション

最大限の汎用性を得るには、JavaScript を活用できます。 <img> の src 属性を直接操作します。タグ。このアプローチは、すべての主要なブラウザで機能します。

<img>

const myImg = document.getElementById('my-img');

myImg.addEventListener('mouseover', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
});

myImg.addEventListener('mouseout', () => {
    myImg.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
});

これらの手法のいずれかを採用することで、<img> のソース URL をシームレスに変更できます。ホバー時にタグを付けることで、Web アプリケーションに動的で魅力的なビジュアル エクスペリエンスを提供します。