Comment simuler un survol avec un navigateur activé au toucher?

Question

Avec du HTML comme celui-ci:

 <p>Some Text</p>
 

Puis quelques CSS comme ceci:

 p {
  color:black;
}

p:hover {
  color:red;
}
 

Comment puis-je autoriser un contact prolongé sur un périphérique tactile avec la réplication en vol stationnaire? Je peux changer le balisage / utiliser JS, etc., mais je ne peux pas penser à un moyen facile de le faire.

Answer 1

OK, j'ai travaillé! Il implique de modifier le CSS légèrement et ajouter de la JS.

Utilisation de jQuery pour faire simple:

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

En anglais: lorsque vous démarrez ou à la fin d'une touche, tournez la classe hover_effect sur on ou off.

Ensuite, dans votre code HTML, ajouter une classe hover pour tout ce que vous voulez que cela fonctionne. Dans votre CSS, remplacer n'importe quelle instance de:

element:hover {
    rule:properties;
}

avec

element:hover, element.hover_effect {
    rule:properties;
}

Et seulement pour l'ajout d'utilité, d'ajouter ceci dans votre CSS:

.hover {
-webkit-user-select: none;
-webkit-touch-callout: none;        
}

Pour arrêter le navigateur vous demandant de copier/sauvegarder/sélectionnez l'image ou quoi que ce soit.

Facile!

Answer 2

Tout ce que vous devez faire est lier touchstart sur un parent. Quelque chose comme cela fonctionne :

Vous n’avez pas besoin de faire quoi que ce soit dans la fonction, le laisser vide. Cela sera suffisant pour obtenir plane sur le contact, donc une touche comporte plus comme : hover et moins comme : actif. magie de l’iOS.

Answer 3

Essayez ceci :

Et dans votre CSS :

Avec ce code vous don´t besoin d’une classe supplémentaire .hover !

Answer 4

Pour répondre à ta question principale: "Comment puis-je simuler un vol stationnaire avec une touche en contact navigateurs compatibles?"

Il suffit de permettre à "cliquer" l'élément (en tapant sur l'écran), puis de déclencher l' hover événement à l'aide de JavaScript.

var p = document.getElementsByTagName('p')[0];
p.onclick = function() {
 // Trigger the `hover` event on the paragraph
 p.onhover.call(p);
};

Cela devrait fonctionner, aussi longtemps que il ya un hover événement sur votre appareil (même si elle n'est normalement pas utilisé).

Mise à jour: je viens de tester cette technique sur mon iPhone et ça semble bien fonctionner. Essayer ici: http://jsfiddle.net/mathias/YS7ft/show/light/

Si vous souhaitez utiliser une longue "touch" pour déclencher passez la souris au lieu de cela, vous pouvez utiliser le code ci-dessus extrait de comme un point de départ et avoir du plaisir avec des minuteries et des trucs ;)

Answer 5

Sans appareil (ou plutôt le navigateur) JS spécifiques, je suis sûr que vous êtes de bonne chance.

Edit : pensé vous avez voulu éviter cela jusqu'à ce que j’ai relu votre question. Dans le cas de Safari Mobile, que vous pouvez vous inscrire pour obtenir tous toucher événements similaires à ce que vous pouvez faire avec native UIView-s. Ne peut pas trouver la documentation droit maintenant, vais essayer de bien.