モバイルデバイスのインタラクション用に :hover アニメーションを調整するにはどうすればよいですか?

モバイル デバイス インタラクションの :hover アニメーションの調整

パネルを展開する :hover CSS アニメーションがモバイルでトリガーされないという問題が発生しました。マウスホバリングがないため、デバイスが無効になります。これに対処するには、ページ幅が 700 ピクセル未満のときにトリガーを「クリック」または「タッチ」に切り替えることを目指します。

これを実現するには、:hover セレクターと :active セレクターを組み合わせて使用​​できます。 CSS で :hover の後に :active を付けてセレクターを順序付けることにより、パネル上のタッチまたはクリック アクションでもアニメーションを確実にトリガーできます。更新された CSS は次のとおりです:

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

この変更により、デスクトップとモバイル デバイスの両方でホバーまたはタッチするとパネルが展開されるようになります。シミュレーターでは正確な結果が得られない可能性があるため、機能を検証するには、実際のモバイル環境でテストすることをお勧めします。

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