CSS non hover essere ignorato su dispositivi touch-screen

ho aggiunti un div con un pulsante HTML:CSS non hover essere ignorato su dispositivi touch-screen

$('.nav').append('<button class="restart">Restart</button>');

Il pulsante ha proprietà CSS per hover. Il mio problema è che quando si tocca il pulsante su un dispositivo touch-screen, il pulsante mantiene il suo stato al passaggio del mouse finché non viene toccato un altro elemento.

C'è un modo in cui la proprietà hover può essere ignorata durante la navigazione con un dispositivo touch-screen?

fonte

2012-12-18 richhastings

Hai l'attributo 'type =" button "'? In caso contrario, il pulsante diventa un pulsante di invio per impostazione predefinita. –

@PatrickJamesMcDougle che non è affatto vero. Un pulsante di invio per cosa ?! – Neal

@Neal Sì, guarda le specifiche. http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html "Il valore mancante predefinito è lo stato del pulsante Submit." –

Non una soluzione ideale, ma grazie @dualed per il vantaggio iniziale!

@media screen and (min-device-width:768px) and (max-device-width:1024px) /*catch touch screen devices */ 
{ 
    button.restart:hover 
    { 
     /* replicate 'up' state of element */ 
    } 
}

fonte

2012-12-18 16:55:37 richhastings

Che dire dei portatili più piccoli (es. superficie MS) in cui un mouse è collegato in verticale? Questo è un metodo sub-ideale. – dudewad

mi sono imbattuto in questo problema esatto di recente, iOS sembra considerare la pseudo hover come un ulteriore clic, in modo da collegamenti saranno esigenze cliccando due volte ecc

Se si utilizza modernizr è possibile applicare i vostri: hover psuedos attraverso il. classe no-touch che viene applicata al tag html.

così:

html a { color:#222; } 

html.no-touch a:hover { color:#111; }

fonte

2012-12-18 15:48:49

Ecco la documentazione di iOS su come gli eventi sono attivati su elementi cliccabili: http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/ uid/TP40006511-SW7 –

Forse non è ciò che si vuole, ma è possibile specificare diversi fogli di stile CSS a seconda del supporto:

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

nell'esempio di cui sopra, main.css sarà utilizzato per schermi di computer, ma per un dispositivo portatile, sarà smallscreen.css

fonte

2012-12-18 15:49:07 Slauster

corretto, anche se quasi tutti i dispositivi touch attualmente si segnalano come 'schermo', non palmare. –

È possibile specificare il tipo di supporto nelle regole CSS.

@media handheld { 
    button.restart:hover { 
    /* undo hover styling */ 
    } 
}

Tuttavia, si noti che i dispositivi portatili non hanno necessariamente un touch screen.

(Btw. Questo è il CSS non jQuery)

fonte

2012-12-18 16:19:05 dualed

Il palmare non funziona molto bene, ma specificando la larghezza del dispositivo nella query, ho una soluzione. – richhastings

@rhastings che potrebbero funzionare, ma potrebbero avere altri effetti collaterali. Potrebbe essere necessario specificare le dimensioni esatte del dispositivo. Purtroppo il mozilla '-moz-touch-enabled' non ha implementazioni equivalenti su webkit. Inoltre, presumo che stiamo parlando della gamma di prodotti mobili i, guarda qui http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/Articles/OtherStandardCSS3Features.html#//apple_ref/doc/uid/TP40007601-SW3 – dualed

-2

Un modo semplice e intuitivo è utilizzare Modernizr.

Quando Modernizr viene eseguito, si aggiungerà una voce nel attributo class del tag HTML per tutte le caratteristiche che rileva, anteponendo la funzione con no- se il browser non lo supporta.

Ora aggiungete seguenti righe al foglio di stile CSS

.touch *:hover { 
    display: none; 
}

e liberamente utilizzare: hover tutte le volte che vuoi. Quando il tuo sito è visualizzato in touch screen, l'effetto hover di tutti gli elementi sarà disabilitato.

fonte

2013-08-08 13:16:23

bella idea, ma non funziona ... – MMachinegun

Inoltre, * in css è * incredibilmente * inefficiente. Tuttavia, questa tecnica dovrebbe funzionare, dal punto di vista tecnico. – dudewad

CSS non hover essere ignorato su dispositivi touch-screen

risposta

Problemi correlati