css - CSSのみのサムネイルスライダー

Question

imgCSSのみを使用し、要素を使用してdivを使用せずに、ホバーすると画像（ラッパーよりも長い）を左端まで移動するサムネイルを作成しようとしていbackground-imageます。

私が抱えている問題は、画像の幅が異なるという事実を考えると、どのように動かすかがわからないことです。

左の画像を正しく移動するデモを行いました。これは、移動する必要がある量を計算し、同じCSSを使用した右の画像が正しく移動しないためです。

Answer 1

img 要素のみを操作するように制限し、より一般的な背景画像スプライトのようなホバー イベント操作を調査しない理由は明らかではありません。

このCodrops の記事とそのデモをご覧ください(メニューに 5 つのデモがあることに注意してください)。

ここで紹介するテクニックは、あなたが求めている正確な最終結果を生み出すわけではありませんが、使用する必要のあるイベントと操作のタイプの構造を含んでいます。