Le vol stationnaire CSS n'est pas ignoré sur les appareils à écran tactile
j'ai ajouté un div avec un bouton html:
$('.nav').append('<button class="restart">Restart</button>');
le bouton possède des propriétés css pour le vol stationnaire. Mon problème, c'est qu'en appuyant sur le bouton d'un écran tactile, le bouton reste en vol stationnaire jusqu'à ce qu'un autre élément soit pointé.
y a-t-il un moyen que la propriété hover puisse être ignorée lors de la navigation avec un dispositif à écran tactile?
5 réponses
je suis tombé sur ce problème exact récemment, iOS semble considérer le hover psuedo comme un clic supplémentaire, donc les liens auront besoin de cliquer deux fois etc ..
si vous utilisez modernizr vous pouvez appliquer votre :hover psuedos à travers le .no-touch class qui s'applique à la balise html.
:
html a { color:#222; }
html.no-touch a:hover { color:#111; }
ce n'est pas une solution idéale, mais merci @dualed pour l'avance!
@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */
{
button.restart:hover
{
/* replicate 'up' state of element */
}
}
vous pouvez spécifier le type de média dans vos règles CSS.
@media handheld {
button.restart:hover {
/* undo hover styling */
}
}
toutefois, veuillez noter que les appareils portatifs ne sont pas nécessairement munis d'un écran tactile.
(Btw. c'est CSS pas jQuery)
peut-être que ce n'est pas ce que vous voulez, mais vous pouvez spécifier différentes feuilles de style css en fonction du support:
<link rel="stylesheet" media="screen,projection,tv" href="main.css" type="text/css">
<link rel="stylesheet" media="print" href="print.css" type="text/css">
<link rel="stylesheet" media="handheld" href="smallscreen.css" type="text/css">
dans l'exemple ci-dessus, principal.css sera utilisé pour les écrans d'ordinateur, mais pour un handeld appareil, il sera smallscreen.css
une façon agréable et facile est d'utiliser Modernizr .
lorsque Modernizr s'exécute, il ajoute une entrée dans l'attribut class du HTML étiquette pour chaque fonctionnalité il détecte, préfixe la fonctionnalité avec no - si le navigateur ne le supporte pas.
ajoutez maintenant les lignes suivantes à votre feuille de style css
.touch *:hover {
display: none;
}
et librement utiliser :passez autant de fois que vous le souhaitez. Lorsque votre site est visualisé sur des écrans tactiles placez l'effet de tous les éléments seront désactivés.