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

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

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

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

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