:hover アニメーションをモバイル デバイスのクリック/タッチ インタラクションに変換するにはどうすればよいですか?

クロスプラットフォーム ホバー エフェクト: :hover をクリック/タッチに変換する

モバイル デバイスでは、 :ホバー。シームレスなユーザー エクスペリエンスを確保するために、開発者は多くの場合、これらのエフェクトをタッチ イベントやクリック イベントで動作するように調整する必要があります。この記事では、:hover アニメーションをモバイル デバイスのクリックベースのインタラクションに変換する簡単なソリューションについて説明します。

次の例は、情報バーの :hover によってトリガーされるアニメーションを示しています。画面幅が 700px を超える場合でも、アニメーションはホバーによってトリガー可能のままです。ただし、小さい画面の場合、アニメーションはクリック イベントによってトリガーされるように変更されます。

CSS アニメーション:

.info-slide {
  transition: height .4s ease-in-out;
  height: 60px;
  background: url(../images/blue-back.png);
}

.info-slide:hover {
  height: 300px;
}

レスポンシブ トランジション用のメディア クエリ:

@media screen and (max-width: 700px) {
  .info-slide {
    cursor: pointer;
  }

  .info-slide:active {
    height: 300px;
  }
}

このソリューションでは、 :hover と組み合わせた :active セレクター。 w3schools によると、このアプローチは、画面幅が 700 ピクセル未満の場合、アニメーションをクリックまたはタッチベースのインタラクションに効果的に変換します。

このソリューションをモバイル環境でテストすると、アニメーションがそれに応じて応答し、一貫したユーザー インターフェイスが提供されることが確認されます。さまざまなデバイスでのエクスペリエンス。

以上が:hover アニメーションをモバイル デバイスのクリック/タッチ インタラクションに変換するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。