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

モバイル デバイスで :hover をタッチ/クリックに置き換える

:hover によってトリガーされる CSS アニメーションがある状況では、この問題は、ホバリングがサポートされていないモバイル デバイスでページにアクセスしたときに発生します。これに対処するには、メディア クエリを使用して、目的の動作を維持しながら :hover からオンタッチ イベントまたはオンクリック イベントに切り替えることができます。

特定のケースでは、CSS は現在 :hover でアニメーションをトリガーします。この機能をモバイル デバイスに拡張するには、.info-slide クラス内で :hover と組み合わせて :active セレクターを追加し、コード内の :hover の後に :active セレクターが表示されるようにします。

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

これらのセレクターを利用すると、デスクトップ デバイスの :hover とモバイル デバイスのタッチ/クリックの両方でアニメーションがトリガーされるという、目的の動作を実現できます。このソリューションの有効性をテストするには、モバイル環境で提供されている JSFiddle にアクセスします。

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