web-dev-qa-db-fra.com

Fixer le survol CSS sur iPhone/iPad/iPod

Je veux réparer l'effet de survol sur iOS (changement d'événement tactile), mais je n'ai aucune idée… .. Laissez-moi vous expliquer ceci… .. Vous avez un texte sur votre page:

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

Avec style :

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

Ok, en dekstop si vous placez votre souris sur le texte, vous obtenez un arrière-plan #ddd, n'est-ce pas? Mais sous iOS, vous n'obtenez rien, mais si vous appuyez dessus, vous obtenez un arrière-plan #ddd laid et collant n’est pas Nice et je veux que l’utilisateur ait l’effet de survol quand il touche ce texte (quelque chose comme touchevent je pense) . Mais je vois des sites fixes comme freemyappps.com ou .__ (veuillez vérifier ce site -> D4F sur votre appareil iOS et touchez quelque chose pour voir l’effet de survol, comme manger un gâteau :)) Mais comment ces sites ont-ils réglé le problème? Comment réparer comme eux? Merci

ioscsshovertouch
28
user2627442

Voici une utilisation basique et réussie du survol de javascript sur ios que j'ai faite:

Note: J'ai utilisé jQuery, ce qui est ok pour vous.

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

Ajoutez onclick = "" à tout ce que vous souhaitez que iOS reconnaisse comme un élément survolé. 

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

Certaines personnes ne savent pas à ce sujet. Vous pouvez l'appliquer surdiv:hoveret travailler sur iPhone.

Ajoutez le css suivant à l'élément avec:hovereffect

.mm {
    cursor: pointer;
}
42
ralcazar

Le onclick = "" était très capricieux quand j'ai essayé de l'utiliser. 

Using: css actif pour les événements de tap; Il suffit de placer ceci dans votre en-tête: 

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

Je ne sais pas si cela aura un impact énorme sur les performances, mais cela m’a fait du bien dans le passé:

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

mobileHover();
16
user1387483

Voici une très légère amélioration de la réponse de user1387483 en utilisant une fonction immédiate:

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

De plus, je suis d'accord avec Boz pour dire que cela semble être la "solution la plus nette et la plus conforme".

3
Jesse Heines

La pseudo-classe de survol ne fonctionne que sur iOS lorsqu'elle est appliquée à une balise de lien. Ils le font parce qu’il n’ya pas de vol stationnaire sur un périphérique tactile. Il agit plus comme la classe active. Donc, ils ne peuvent pas en avoir un sauf si c'est un lien allant quelque part pour des raisons de convivialité. Changez votre div en une balise link et vous n’aurez aucun problème. 

2
jons

Je sais que c'est un ancien message auquel j'ai déjà répondu, mais j'ai trouvé une autre solution sans ajouter de classes css ou en utilisant trop de javascript, et je souhaite le partager en espérant pouvoir aider quelqu'un.

J'ai constaté que pour activer l'effet :hover sur tous les types d'éléments d'un navigateur compatible Touch, vous devez lui dire que vos éléments sont cliquables . Pour cela, vous pouvez simplement ajouter un la fonction click avec jQuery ou javascript.

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

C'est mieux si vous ne le faites que sur les navigateurs compatibles Mobile avec cet extrait:

// 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

J'ai utilisé avec succès 

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

qui a été documenté sur http://fofwebdesign.co.uk/template/_testing/ios-sticky-hover-fix.htm

donc une variation de Andrew M. répond.

1
Sylvain D.

  1. L'affectation d'un écouteur d'événement à l'élément cible semble fonctionner. (Fonctionne avec 'clic', au moins.) Le survol CSS sur ios ne fonctionne que si un écouteur d'événements est affecté

  2. Envelopper l'élément cible dans un [href = trivial] semble également fonctionner. https://stackoverflow.com/a/28792519/1378390

Une note/diagramme connexe sur l'algorithme de Safari pour la gestion des clics et d'autres événements est disponible: Est-il possible d'ignorer de force la pseudo-classe: hover pour les utilisateurs d'iPhone/iPad?

1
jerng

Sur certains sites, je dois utiliser css "cursor: help". Seulement iOS cela m'a donné beaucoup d'irritation. Pour résoudre ce problème, changez tout le contenu de la page en "curseur: pointeur". Ça marche pour moi.

jQuery:

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

Je sais que la question est ancienne mais toujours d'actualité.

La seule solution que j'ai trouvée qui fonctionne utilise une requête @media comme celle-ci:

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

Ma référence: https://www.jonathanfielding.com/an-inintroduction-to-interaction-media-features/

0
gloaysa

Où, j’ai résolu ce problème en ajoutant l’attribut de visibilité au code CSS, cela fonctionne sur mon website

Code original:

#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;
}

Code tactile iOS fixe:

#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

Old Post Je sais cependant que j'ai utilisé avec succès onlclick = "" lors du remplissage d'une table avec des données JSON. Essayé de nombreuses autres options/scripts, etc. auparavant, rien ne fonctionnait. Je vais essayer cette approche ailleurs. Merci @ Dan Morris .. à partir de 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