it-swarm.com.de

CSS: Hover auf Mobilgeräten oder anderen Geräten als Umschalter

Ich mache eine einfache :hover Folie, wie in der Abbildung gezeigt, sie soll in einem "Lieblingsartikel" -Regler schieben, mit dem der Benutzer dieses Element als Favorit markieren kann.

Während es auf dem Desktop mit Mauszeiger und Mausklick gut funktioniert, bin ich nicht sicher, ob es als wirksame Kontrolle für mobile Geräte oder andere Geräte verwendet werden kann (z. B. Klicken zum Umschalten, dann erneut zum Favoriten).

Wenn ich es richtig verstanden habe, zumindest unter iOS (Safari) und Android (Chrome), ist das Standardverhalten des Browsers, als hover und click touch zu emulieren. Aber ist es ein Standard ? z.B.

  • Wird Windows Phone oder vielleicht eine Wii U dasselbe tun?
  • Wird click etwa 300ms nach hover ausgelöst, so dass ein Ghost-Click-Problem auftreten kann?

Ich kann sicherlich ein Click/Touch-Ereignis an dieses Element binden und frage mich nur, ob css :hover heutzutage ausreichend ist.

Zur Klarstellung : Ich frage nicht nach :hover-Unterstützung, die nur in einer Pointer-gesteuerten Umgebung Sinn macht. Ich frage, ob Geräte mit schwebefähigen Elementen umgehen können und sollen, wenn Benutzer klicken/tippen (wie iOS/Android).

enter image description here

19
bitinn

Ihre Frage ist nicht ganz klar und ich kann nicht verstehen, ob Sie die Frage "Kann ich :hover Auf allen Geräten verwenden?" oder "Wird sich :hover auf allen Geräten gleich verhalten?" oder "Ist :hover ein Standardelement im Web?"

Auch hängt es stark von Ihrem Konzept "aller Geräte" ab, ob Sie die aktuell am häufigsten verwendeten Geräte im Auge haben oder auch die weniger bekannten und verwendeten Geräte berücksichtigen.

Ich werde Ihnen folgendes zitieren, aber ich bin mir ziemlich sicher, dass Sie das bereits gelesen haben:

Interaktive Benutzeragenten ändern manchmal das Rendering als Reaktion auf Benutzeraktionen. CSS bietet drei Pseudoklassen für häufige Fälle:

Die: hover-Pseudoklasse wird angewendet, wenn der Benutzer ein Element bestimmt (mit einigenZeigegeräten), aber nicht aktiviert. Beispielsweise kann ein visueller Benutzeragent diese Pseudoklasse anwenden, wenn sich der Cursor (Mauszeiger) über einem vom Element generierten Feld befindet.Benutzerprogramme, die keine interaktiven Medien unterstützen, müssen diese Pseudoklasse nicht unterstützen. Einige konforme Benutzeragenten, die interaktive Medien unterstützen, sind möglicherweise nicht in der Lage,diese Pseudoklasse zu unterstützen (z. B.ein Stiftgerät). Die: active-Pseudoklasse wird angewendet, während ein Element vom Benutzer aktiviert wird. Zum Beispiel zwischen dem Drücken und Loslassen der Maustaste durch den Benutzer.

CSS definiert nicht, welche Elemente sich in den obigen Zuständen befinden dürfen oder wie die Zustände eingegeben und verlassen werden. Die Skripterstellung ändert möglicherweise, ob Elemente auf Benutzerereignisse reagieren oder nicht.und verschiedene Geräte und Benutzeroberflächen können auf unterschiedliche Weise auf Elemente zeigen oder diese aktivieren..

5.11.3 Die dynamischen Pseudoklassen:: hover,: active und: focus http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Wie Sie in der W3C-Spezifikation sehen können, wird behauptet, dass die :hover - Pseudoklasse nicht für nicht interaktive Medienbenutzeragenten sowie füreinigeinteraktive Medienbenutzeragenten erforderlich ist. Daher ist davon auszugehen, dass :hover Nicht immer unterstützt wird.

Lesen Sie die folgenden Spezifikationen für Safari Mobile, um sich eingehend mit der Angelegenheit zu befassen:

Darüber hinaus interagieren Benutzer von Safari unter iOS direkt mit ihren Fingern mit Ihren Webinhalten, anstatt eine Maus zu verwenden.Dies schafft neue Möglichkeiten für Touch-fähige Oberflächen, funktioniert aber nicht gut mit Schwebezuständen. Beispielsweise kann sichein Mauszeiger über einem Webseitenelement befinden und ein Ereignis auslösen. Ein Finger auf einem Multi-Touch-Bildschirm kann nicht. Aus diesem Grund werden in SafariMausereignisse unter iOSemuliert. Infolgedessen verhalten sichElemente, die nur auf mousemove, mouseover, mouseout oder der CSS-Pseudoklasse: hover basieren, auf einem Touchscreen-Gerät wie dem iPad oder iPhone möglicherweise nicht immer wie erwartet.

Mit den DOM Touch-Ereignissen touchstart, touchmove, touchend und touchcancel können Sie Berührungen direkt verarbeiten oder sogar erweiterte Gesten in Safari auf iOS erkennen.Im Gegensatz zu Mausereignissen, die emuliert werden (), sind DOM Touch-Ereignisse speziell für die Verwendung mit Berührungsoberflächen konzipiert, sodass ihr Verhalten zuverlässig ist und erwartet wird.

5. Bereiten Sie sich auf eine Touch-Oberfläche vor https://developer.Apple.com/library/content/technotes/tn2010/tn2262/_index.html

Apple gibt hier eindeutig an, dass sie dazu neigen, den Zeiger mit den Berührungsgesten zu emulieren, schlägt jedoch eindeutig vor, die Verwendung der Pseudoklasse :hover Zu vermeiden, da sie sich auf ihrem Berührungsgerät nicht gleich verhält.

Wir könnten tiefer gehen und jede Dokumentation für jeden auf der Erde existierenden Benutzeragenten abrufen, aber die beiden vorherigen reichen aus, um Folgendes anzunehmen:

  • Nicht interaktive Geräte müssen :hover Nicht unterstützen
  • Interaktive Geräte können die Pseudoklasse unterstützen (dies ist jedoch nicht obligatorisch und sie können sie ignorieren, z. B. Bildschirmlesegeräte oder Braille-Bildschirme).
  • Apple Touch-Geräte ohne Zeiger emulieren :hover
  • Es ist sicher anzunehmen, dass aktuelle Touch-Geräte auch :hover Emulieren.
  • Es ist sicher anzunehmen, dass jeder andere Browser/jedes andere Gerät :hover Je nach Schnittstelle nicht unbedingt unterstützen muss.
  • Sehr wahrscheinlich werden alle neueren Browser :hover Unterstützen, da dies eine visuelle Hilfe für den Benutzer ist.

Um alle Fragen zu beantworten, die ich oben angenommen habe:

"Ist :hover Ein Standardelement im Web?"

Hover ist ein Standard-W3C, der behauptet, dass esmussdurch ein Zeigerereignis ausgelöst werden,aberist für einige Schnittstellen nicht erforderlich.

"Kann ich :hover Auf allen Geräten verwenden?"

Ja duwahrscheinlichkannst. Die Geräte, die nicht unterstützt werden: Hover sind sehr wahrscheinlich Geräte/Benutzer, die wahrscheinlich nicht Ihr Hauptziel sind. Fragen Sie sich lieber: "Wer ist der Endverbraucher meines Produkts?" Wenn es sich nur um mobile Benutzer oder nur um Blinde handelt oder nur um Personen, die mit dem Nintendo DS surfen möchten, verwenden Sie keine :hover - Ereignisse.

"Wird sich :hover Auf allen Geräten gleich verhalten?"

Nein, da Apple sich auf ihren Geräten nicht wie ein Desktop verhält und dies wahrscheinlich auf allen Geräten ohne Zeiger das gleiche Verhalten widerspiegelt.

Wenn Sie eine Benutzeraktion über einen Schwebezustand planen, tun Sie dies nicht. Dies ist im Allgemeinen eine schlechte Praxis und sollte auf jeden Fall vermieden werden, auch bei Desktopgeräten. Hover ist kein Aufruf zum Handeln, Klick ist. Schweben sollte nicht als "Umschalten" behandelt werden, sondern eher als visueller Helfer für den Benutzer, damit er versteht, dass das angeklickte Element eine Aktion auslöst.

Wenn ich Ihre Anwendung verstanden habe, ist der Schwebeflug nicht zuverlässig und in Ihrem speziellen Fall sollten Sie überlegen, wie er funktionieren soll. Verwenden Sie eine zuverlässigere Methode (und von Ihrem Benutzer erwartet)

20
MacK

Wenn Sie mit dem Mauszeiger über ein Webseitenelement fahren, wird beim Browsen mit Maus und Tastatur häufig vorgegangen. Beim Berührungsbasierten Browsen gibt es jedoch keine Entsprechung. In diesem Thema wird veranschaulicht, wie Sie mit der Eigenschaft aria-haspopup Document Object Model (DOM) Hover auf touchfähigen Geräten mit Internet Explorer 10 unter Windows 8 simulieren.

Dieses Verhalten gilt nicht für Internet Explorer 10 unter Windows 7 (das keine Hover-Simulation mit aria-haspopup unterstützt) oder Internet Explorer 11 unter Windows 8.1 (mit integrierter Touch-Hover-Unterstützung).

In Berührungsszenarien wird der Hover während der Berührung auf ein Element angewendet. Durch Tippen auf ein Element kann jedoch auch ein Element aktiviert werden, z. B. das Navigieren in einer Verknüpfung. In der Tat ist ein Tap sowohl Hover als auch Aktivierung in einer Aktion. Dies macht den interaktiven Inhalt hinter dem Hover für Touch-Benutzer nicht zugänglich. Das Interaktionsmodell ist völlig anders und es gibt keine Berührung analog zum Bewegen des Cursors über ein Seitenelement.

Es empfiehlt sich, Hover nicht zum Ausblenden von Inhalten zu verwenden, die ein Benutzer haben kann mit ... interagieren. Verwenden Sie stattdessen das onclick -Ereignis zum Umschalten von Sichtweite.

3
mohamedrias

Es scheint mir, dass ein Teil dieser Frage noch nicht beantwortet wurde, nämlich wie das tatsächliche Verhalten von Windows-Handys in Bezug auf "Schwebeflug" ist. Zu klären:

Stellen Sie sich eine Webseite vor, die für die Verwendung mit Desktops/Mäusen geschrieben wurde und in der css-Markup vorhanden ist, so dass 'hover' einen auf ein Objekt angewendeten Stil ändert. Wenn Sie diese Seite auf iPhone oder Android anzeigen und auf das Objekt tippen, wird der Stil geändert. (d. h. es verhält sich so, als hätte das Objekt einen onClick () - Ereignishandler, um den Stil zu ändern). Kommt das gleiche auf einem Windows Phone vor?

Diese Frage kann ich zumindest für das Nokia Lumia 630 mit Win 8.1 beantworten:

Nein. Wenn Sie mit dem Finger im ersten Teil eines Klicks nach unten drücken, wird der Stil geändert, aber wenn Sie Ihren Finger am Ende des Klopfs loslassen, wird der Stil auf das Original zurückgesetzt. (Dies ist wohl eine zutreffendere Interpretation von „Schweben“ für Berührungen, ob es jedoch von praktischem Nutzen ist, ist eine andere Sache.)

Ich würde hinzufügen, dass die iPhone/Safari-Interpretation von hover auch einen Aus-Zustand hat. Dies wird ausgelöst, wenn Sie auf ein anderes Objekt tippen.

Um dies zu zeigen und das Testen auf verschiedenen Geräten/Browsern zu ermöglichen, habe ich eine Demo-Seite unter www.davidleader.net/mobiledemo.html eingerichtet. Dies implementiert onClick (), onMouseover () und: hover, um die Deckkraft eines Bildes zu ändern und eine andere darunter sichtbar zu machen. (Es hängt also von der Unterstützung der Deckkraft ab, aber das ist schon eine Weile her.) Es gibt auch eine "stumme Grafik", auf die Sie klicken können, um das Ende des Hover auf dem iPhone zu demonstrieren.

Zusammenfassend kann gesagt werden, dass es keine de jure - Standards für die Interpretation von Schwebefehlern auf mobilen Geräten gibt, und es gibt auch keine de facto - Standards. Wenn Sie also ein Handy anvisieren, vermeiden Sie Schwebeflug.

2
David

Es gibt im Moment keine, für die es eine gute Unterstützung gibt: Hover State in Mobile 

Siehe verwandte Frage dazu

Ich habe zwar kein Modernzr.js für Mobilgeräte verwendet, kann aber feststellen, ob der Browser Berührungsereignisse unterstützt. Wenn der Benutzer ein Mobilgerät verwendet, fügt er dem html-Tag die Klasse .touch hinzu.

sie werden es so verwenden, z

.touch a:active{ /*css code here */ }

hoffentlich würde das irgendwie helfen

1
arnold

Bei Handys bezweifle ich, dass es einen Standard gibt. Ja, es ist sehr üblich, dass ein Touch-Gerät während des Berührens einen Hover-Status anwendet. Sie können jedoch nie sagen, ob ein Benutzer eine beliebige Anzahl von Browsern verwenden kann, die einen Hover-Status möglicherweise anders interpretieren.

Ich würde sagen, dass Sie am besten nach dem kleinsten gemeinsamen Nenner suchen und einfach davon ausgehen, dass jedes Touch-Gerät nur auf Touch-Aktionen reagieren kann.

Die Antwort darauf ist natürlich das Schreiben von Medienanfragen und/oder Javascript, um die Browser zu zwingen, so zu handeln, wie Sie es möchten.

Das ist nur meine persönliche Philosophie, für was es wert ist.

0
Grapho