Wie kann ich :hover-Animationen durch Berühren/Klicken auf Mobilgeräten ersetzen?

Ersetzen von :hover durch Touch/Click auf Mobilgeräten

In einer Situation, in der Sie eine CSS-Animation haben, die durch :hover ausgelöst wird, besteht die Herausforderung entsteht, wenn Ihre Seite über ein mobiles Gerät aufgerufen wird und Hovern nicht unterstützt wird. Um dieses Problem zu lösen, können Sie Medienabfragen verwenden, um von :hover zu On-Touch- oder On-Click-Ereignissen zu wechseln und dabei das gewünschte Verhalten beizubehalten.

In Ihrem speziellen Fall löst Ihr CSS derzeit die Animation bei :hover aus. Um diese Funktionalität auf mobile Geräte zu erweitern, können Sie den :active-Selektor in Kombination mit :hover innerhalb der .info-slide-Klasse anhängen, um sicherzustellen, dass der :active-Selektor nach :hover im Code erscheint.

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

Durch die Verwendung dieser Selektoren können Sie das gewünschte Verhalten erreichen, wobei die Animation sowohl beim Hover für Desktop-Geräte als auch beim Berühren/Klicken für mobile Geräte ausgelöst wird. Um die Wirksamkeit dieser Lösung zu testen, können Sie in einer mobilen Umgebung auf die bereitgestellte JSFiddle zugreifen.

Das obige ist der detaillierte Inhalt vonWie kann ich :hover-Animationen durch Berühren/Klicken auf Mobilgeräten ersetzen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!