私は純粋なcssを使用してロールオーバー画像に取り組んでおり、目的の結果を達成するための2つのソリューションを認識しています。それらの方法で私が気付いていない利点があるのか、そして好ましい方法があるのか、それとも単なる好みなのか疑問に思います（巨大なプロジェクトを完了する前に確認したいので、後で驚きはありません）
最初の方法
私が遭遇する最初の方法は、複数の画像を1つの画像として保存することです。次に、画像を仕切りの背景（画像全体よりも小さい）として:hover設定し、背景位置を負に設定すると、他の画像が表示されます
私が考えたいくつかの短所と長所は次のとおりです。
プロ
画像を手動でプリロードする必要はありません（cssファイルの最後にコードを配置することにより）
画像ファイルの数が少なくなる可能性があるため、画像ファイルを整理する方が簡単な場合があります
短所
- グラフィックを設計する別のチームがいる場合は特に、画像がどれだけ正確に動くかを知るのは難しい場合があります
2番目の方法
私が遭遇した2番目の方法は、仕切りの画像の背景を設定してから、背景のURLを変更することです。:hover
私が頭の上で考えることができるいくつかの短所と長所：
プロ
開発にかかる時間が短縮される可能性があります
ロールオーバー画像をより簡単に交換でき、仕切りのサイズを指定する必要はありません
短所
cssファイルの最後に画像をプリロードする必要があります
ファイルがたくさんある場合は、画像フォルダがさらに混乱する可能性があります
私が見逃している長所または短所はありますか？ある方法が他の方法よりも一般的に好まれますか、そしてその理由は何ですか？それとも個人的な選択で、どちらを使用しても問題ありませんか？
更新： これは、純粋なcssを使用した2番目のメソッドの単純なプリロードへのリンクです。（リンクを配置するだけの）もっと簡単な方法があると思いましたが、見つかりません。それでもこれはかなり基本的なことです。
Update（2）： スプライトには追加の機能があることを学びました
httpリクエストの数を減らすことでウェブサイトを高速化するメリット。
ちらつきのない可能な限り高速なロールオーバーの利点
また、アクセスしにくいサイトを作成するという失敗は、HTMLのtitle属性とalt属性の潜在的な利点を制限することになります。（装飾やボタンだけでなく、すべての画像に誤って使用された場合）