Rileva la capacità al passaggio del mouse

Question

La pseudo-classe CSS hover non funziona bene sui dispositivi touch. Lo stato di hover tende a restare fermo fino a quando qualcos'altro viene toccato. Quindi, nelle nostre applicazioni web, usiamo Modernizr per rilevare i browser/dispositivi con funzionalità touch e disattiviamo stati hover in quei casi:

.no-touch apri un: hover {...}

Questo diventa un problema su un dispositivo ibrido che supporta sia un touchscreen sia un dispositivo puntatore, come un mouse o un touchpad. Modernizr rileva che è abilitato per il tocco e nessuno degli stati di hover funziona quando si utilizza il mouse.

Ciò che sarebbe più utile è rilevare la presenza del mouse o di un altro dispositivo puntatore al posto del touchscreen. Ma non riesco a trovare qualcosa di simile.

Qualche suggerimento?

Answer 1

Si può provare jQueries .mouseover() .mouseenter() .mouseout() .mouseleave()

Im non sicuro se questo risponde alla tua domanda, ma questo è un modo diverso di andare su e si libra rilevare quando un "puntatore" entra sopra qualcosa. Inoltre, puoi utilizzare le query multimediali per: hover nel tuo css e, credo, disattivarle. Oppure fai qualcos'altro a una certa larghezza della dimensione dello schermo degli utenti. 800px è qualcosa come una dimensione ipad. Di seguito è riportato un codice, spero davvero che funzioni!

$(document).ready(function(){ 
 
    $(".box").mouseover(function(){ 
 
    var duhbox = $(".box").addClass("black"); 
 
    duhbox.animate({borderRadius: "50px"}); 
 
    }); 
 
    $(".box").mouseout(function(){ 
 
    var goBack = $(".box").removeClass("black"); 
 
    goBack.animate({borderRadius: "0px"}); 
 
    }); 
 
});

.box{ 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: royalblue; 
 
    border: 1px solid black; 
 
} 
 

 
.black{ 
 
    background-color: black; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

se questo non funziona come si voleva che. Penserei ad altri modi!

Answer 2

So che questa è una vecchia questione, ma per Googler atterrare qui, questo media query farà il lavoro:

@media not all and (hover: none) { 
    .hoverspecificstyles:hover { 
    display: block; 
    } 
} 

Tratto da this answer