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
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>
Ajoutez onclick = "" à tout ce que vous souhaitez que iOS reconnaisse comme un élément survolé.
<div onclick="">Click Me!</div>
Certaines personnes ne savent pas à ce sujet. Vous pouvez l'appliquer surdiv:hover
et travailler sur iPhone.
Ajoutez le css suivant à l'élément avec:hover
effect
.mm {
cursor: pointer;
}
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>
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();
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".
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.
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(){ });
}
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.
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é
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?
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"});
}
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/
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;
}
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);
}
);