wake-up-neo.net

CSS-Hover auf iPhone/iPad/iPod korrigieren

Ich möchte den Hover-Effekt auf iOS korrigieren (zu Touch-Ereignis ändern), aber ich habe keine Ahnung. Lassen Sie mich das erklären. Sie haben einen Text auf Ihrer Seite:

<div class="mm">hello world</div>

Mit Stil :

.mm { color:#000; padding:15px; }
.mm:hover { background:#ddd; }

Ok, wenn Sie mit der Maus über den Text fahren, erhalten Sie einen #ddd-Hintergrund, richtig? Aber wenn Sie den Text berühren, erhalten Sie nichts, aber wenn Sie darauf tippen, wird ein hässlicher und klebriger #ddd-Hintergrund angezeigt ist nicht nett und ich möchte, dass der Benutzer den Hover-Effekt erhält, wenn er den Text berührt (so etwas wie ein Touchevent, denke ich) .. Aber ich sehe einige feste Seiten, die wie freemyappps.com oder .__ D4F und berühren Sie etwas auf Ihrem iOS-Gerät, um den Hover-Effekt wie einen Kuchen zu sehen :)) Aber wie haben diese Sites das behoben? Wie kann das Problem behoben werden? Danke

28
user2627442

Hier ist eine grundlegende, erfolgreiche Verwendung des Javascript-Hover auf ios, den ich gemacht habe:

Hinweis: Ich habe jQuery verwendet, was für Sie hoffentlich in Ordnung ist.

JavaScript:

$(document).ready(function(){
  // Sorry about bad spacing. Also...this is jquery if you didn't notice allready.
  $(".mm").hover(function(){
    //On Hover - Works on ios
    $("p").hide();
  }, function(){
    //Hover Off - Hover off doesn't seem to work on iOS
    $("p").show();
 })
});

CSS:

.mm { color:#000; padding:15px; }

HTML:

<div class="mm">hello world</div>
<p>this will disappear on hover of hello world</p>
6
Santa Claus

Fügen Sie onclick = "" zu allem hinzu, das iOS als Element mit einem Hover erkennen soll. 

<div onclick="">Click Me!</div>
93
Dan Morris

Einige Leute wissen nichts davon. Sie können es aufdiv:hoveranwenden und auf dem iPhone arbeiten.

Fügen Sie dem Element mit:hovereffect die folgende Datei hinzu

.mm {
    cursor: pointer;
}
42
ralcazar

Das onclick = "" war sehr temperamentvoll, als ich versuchte, es zu benutzen. 

Using: active css für Antippereignisse; fügen Sie dies einfach in Ihre Kopfzeile ein: 

<script>
    document.addEventListener("touchstart", function() {},false);
</script>
18
Andrew M

Ich bin mir nicht sicher, ob dies einen großen Einfluss auf die Leistung haben wird, aber dies hat mir in der Vergangenheit den Trick gebracht:

var mobileHover = function () {
    $('*').on('touchstart', function () {
        $(this).trigger('hover');
    }).on('touchend', function () {
        $(this).trigger('hover');
    });
};

mobileHover();
16
user1387483

Als Antwort auf Dan ( https://stackoverflow.com/a/20048559/4298604 ) würde ich eine leicht geänderte Version empfehlen.

<div onclick="void(0)">Click Me!</div>

Das Hinzufügen von "void (0)" hilft, den undefinierten Grundwert im Gegensatz zu "" zu erhalten.

3

Hier ist eine sehr geringfügige Verbesserung der Antwort von Benutzer1387483 mit einer Sofortfunktion:

(function() {
  $("*").on( 'touchstart', function() {
    $(this).trigger('hover') ;
  } ).on('touchend', function() {
    $(this).trigger('hover') ;
  } ) ;
})() ;

Ich stimme auch mit Boz überein, dass dies die "sauberste, konformeste Lösung" zu sein scheint.

3
Jesse Heines

Die Hover-Pseudoklasse funktioniert nur unter iOS, wenn sie auf ein Link-Tag angewendet wird. Sie tun das, weil auf einem Touch-Gerät kein Schwebeflug stattfindet. Es wirkt eher wie die aktive Klasse. Sie können also keine haben, es sei denn, es handelt sich um einen Link aus Gründen der Benutzerfreundlichkeit. Ändern Sie Ihr Div in ein Link-Tag und Sie haben kein Problem. 

2
jons

Ich weiß, dass es ein alter Beitrag ist, der bereits beantwortet wurde, aber ich habe eine andere Lösung gefunden , ohne CSS-Klassen hinzuzufügen oder zu viel Javascript zu tun, als wirklich benötigt wurde, und ich möchte es teilen, in der Hoffnung kann jemand helfen.

Ich habe festgestellt, dass Sie zum Aktivieren des :hover-Effekts für alle Arten von Elementen in einem Touch-fähigen Browser ihm mitteilen müssen, dass Ihre Elemente clickable ..__ sind. Dazu können Sie einfach einen leeren Handler hinzufügen die Klickfunktion mit jQuery oder Javascript.

$('.need-hover').on('click', function(){ });

Es ist besser, wenn Sie dies nur für mobile Browser mit diesem Snippet tun:

// check for css :hover supports and save in a variable
var supportsTouch = (typeof Touch == "object");

if(supportsTouch){ 
    // not supports :hover
    $('.need-hover').on('click', function(){ });
}
1
E. Atzeni

Ich habe erfolgreich verwendet 

(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document);

die wurde am http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm

so eine Variation von Andrew M Antwort.

1
Sylvain D.
  1. Das Zuweisen eines Ereignis-Listeners zu dem Zielelement scheint zu funktionieren. (Funktioniert mindestens mit 'click'.) CSS-Hover unter ios funktioniert nur, wenn ein Ereignis-Listener zugewiesen ist

  2. Das Einschließen des Zielelements in ein [href = trivial] scheint ebenfalls zu funktionieren. https://stackoverflow.com/a/28792519/1378390

Ein verwandter Hinweis/Diagramm zum Algorithmus von Mobile Safari zum Umgang mit Klicks und anderen Ereignissen ist hier: Ist es möglich, die: hover-Pseudoklasse für iPhone/iPad-Benutzer ignorieren zu lassen?

1
jerng

Auf einigen Sites muss ich css "Cursor: Help" verwenden. Nur iOS hat mich sehr irritiert. Um dieses Problem zu lösen, ändern Sie den gesamten Inhalt der Seite in "Cursor: Zeiger". Das ist für mich in Ordnung.

jQuery:

if (/iP(hone|od|ad)/.test(navigator.platform)) {
$("*").css({"cursor":"pointer"});
}
0
Wobbo

Ich weiß, dass die Frage zwar alt ist, aber immer noch relevant ist.

Die einzige Lösung, die ich gefunden habe, ist die Verwendung von @media-Abfrage wie folgt:

@media (hover) { my-class:hover {
  //properties
 }
}

Meine Referenz: https://www.jonathanfielding.com/an-introduction-to-interaction-media-features/

0
gloaysa

Wo ich dieses Problem gelöst habe, indem ich das CSS-Code mit dem Sichtbarkeitsattribut versehen habe, funktioniert es auf meiner Website

Originalcode:

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

Behobener iOS-Touch-Code:

#zo2-body-wrap .introText .images:before
{
background:rgba(136,136,136,0.7);
width:100%;
height:100%;
content:"";
position:absolute;
top:0;
visibility:hidden;
opacity:0;
transition:all 0.2s ease-in-out 0s;
}

0
Jackie

Alte Post Ich weiß, jedoch habe ich onlclick = "" erfolgreich verwendet, wenn Sie eine Tabelle mit JSON-Daten füllen. Habe schon viele andere Optionen/Skripte usw. ausprobiert, nichts hat funktioniert. Will diesen Ansatz anderswo versuchen. Danke @Dan Morris .. von 2013! 

     function append_json(data) {
     var table=document.getElementById('gable');
     data.forEach(function(object) {
         var tr=document.createElement('tr');
         tr.innerHTML='<td onclick="">' + object.COUNTRY + '</td>' + '<td onclick="">' + object.PoD + '</td>' + '<td onclick="">' + object.BALANCE + '</td>' + '<td onclick="">' + object.DATE + '</td>';
         table.appendChild(tr);
     }
     );
0
BorisNZ