Ändern: Bewegen Sie den Mauszeiger zum Berühren / Klicken für mobile Geräte

Ich habe mich umgesehen, kann aber nicht ganz finden, wonach ich suche.

Ich habe derzeit eine CSS-Animation auf meiner Seite, die ausgelöst wird durch: hover. Ich möchte, dass dies in "Klicken" oder "Berühren" geändert wird, wenn die Größe der Seite mithilfe von Medienabfragen über die Breite 700px hinaus geändert wird.

Folgendes habe ich momentan: http://jsfiddle.net/danieljoseph/3p6Kz/

Wie Sie sehen können, funktioniert der Hover nicht auf Mobilgeräten, aber ich möchte trotzdem sicherstellen, dass er auf die gleiche Weise funktioniert, indem Sie einfach klicken und nicht schweben.

Ich würde lieber CSS verwenden, wenn möglich, aber auch mit JQuery zufrieden sein.

Ich habe das Gefühl, dass dies sehr einfach ist, aber mir fehlt nur etwas sehr Offensichtliches! Jede Hilfe wäre dankbar.

Hier ist die CSS-Animation:

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

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

Wenn Sie: active selector in Kombination mit: hover verwenden, können Sie dies gemäß w3schools erreichen , solange der: active selector nach dem: hover selector aufgerufen wird.

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

Sie müssten die FIDDLE in einer mobilen Umgebung testen . Ich kann im Moment nicht.
Korrektur - Ich habe gerade in einem Handy getestet, es funktioniert gut

Sie können onclick=""dem schwebenden Element hinzufügen . Hover wird danach funktionieren.

Bearbeiten: Aber Sie sollten wirklich keinen Stil hinzufügen, der mit Ihrem Markup zusammenhängt, sondern ihn nur als Alternative veröffentlichen.

Ich habe die gleichen Probleme auf Mobilgeräten mit dem Edge-Browser von Microsoft. Ich kann das Problem lösen mit : aria-haspopup="true". Es muß die div und dem hinzuzufügen :hover, :active, :focusfür die anderen mobilen Browser.

Beispiel HTML:

<div class="left_bar" aria-haspopup="true">

CSS:

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

document.addEventListener("touchstart", function() {}, true);

Dieses Snippet aktiviert Hover-Effekte für Touchscreens

Ich bin ein CSS-Neuling, aber ich habe festgestellt, dass Hover für Touchscreens funktioniert, solange es sich um ein "schwebbares" Element handelt: Bild, Link, Schaltfläche. Mit dem folgenden Trick können Sie alles mit CSS erledigen.

Ändern Sie Ihren Div-Hintergrund in ein tatsächliches Bild-Tag innerhalb des Div oder erstellen Sie einen Dummy-Link um das gesamte Div. Dieser wird dann als Hover registriert, wenn Sie das Bild berühren.

Wenn Sie dies tun, muss der Rest Ihrer Seite auch "schwebbar" sein. Wenn Sie also außerhalb des Bildes berühren, wird erkannt, dass info-slide: hover beendet wurde. Mein Trick besteht darin, alle meine anderen Content-Dummy-Links zu erstellen.

Es ist nicht sehr elegant, aber es funktioniert.

Auf den meisten Geräten funktionieren die anderen Antworten. Um sicherzustellen, dass es auf jedem Gerät funktioniert (als Reaktion), musste ich es in ein Ankertag einwickeln<a> und fügen Sie die folgenden: :hover, :focus, :active(in dieser Reihenfolge), sowie role="button"und tabIndex="0".

Ich denke, diese einfache Methode kann dieses Ziel erreichen. Mit CSS können Sie das Zeigerereignis auf 'none' deaktivieren und dann mit jQuery die Klassen wechseln.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }
 
.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

Verwenden Sie jQuery, um klassifiziert zu wechseln:

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

Nun, ich stimme den obigen Antworten zu, aber es kann immer noch einen anderen Weg geben, dies zu tun, und zwar unter Verwendung von media Abfragen.

Angenommen, Sie möchten Folgendes tun:

body.nontouch nav a:hover {
    background: yellow;
}

Dann können Sie dies per Medienabfrage tun als:

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

Weitere Informationen finden Sie auf dieser Seite.

Eine reine CSS-Lösung für diejenigen, die Probleme mit dem Styling von mobilen Touchscreen-Tasten haben.

Dadurch werden Probleme mit dem Hover-Stick / der aktiven Taste behoben.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>