Effetti al passaggio del mouse con gli eventi di tocco CSS3

Sto utilizzando il passaggio del mouse e le transizioni CSS3 per mostrare e nascondere un'immagine. Sui dispositivi mobili vorrei utilizzare la stessa transizione per gli eventi tattili.Effetti al passaggio del mouse con gli eventi di tocco CSS3

Fondamentalmente, il primo tocco eseguiva l'effetto al passaggio del mouse o il rollover e il ritocco eseguiva il roll-off.

Mi piacerebbe stare lontano dall'usare JavaScript per fare questo. Se c'è un modo per farlo con CSS3 puro, questa sarebbe l'opzione migliore.

fonte

2011-11-30 mattwallace

sei domanda è in realtà piuttosto vago; non sono sicuro se stai chiedendo * come * farlo in entrambi, o può essere fatto solo nei CSS. Se desideri maggiori informazioni su come ciò può essere fatto in javascript ti preghiamo di aggiornare la tua domanda e posso aggiornare la mia risposta :) – rlemon

* la tua domanda ;-) –

Possibile duplicato di [: pseudo-classe attiva non funziona in mobile safari] (https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) – JakeGould

Utilizzare la pseudo-classe :active nel proprio css, quindi aggiungere ontouchstart="" e onmouseover="" al tag del corpo.

Il codice seguente è tratto dal mio sito, in cui ho pulsanti che diventano più piccoli e bagliore bianco quando aleggiava (su PC) o premuti (su dispositivi touch)

<style> 
.boxbutton:active{ 
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
} 
</style> 


<body ontouchstart=""> 
    <a href="#teamdiv"> 
     <div class="boxbutton" id="teambb"> 
      <h5>Team</h5> 
     </div> 
    </a> 
</body>

Le seguenti modifiche sono non è più rilevante perché ho cancellato i, istruzioni non corrette originali, ma se tu fossi qui prima che questi possono ancora essere utile

EDIT: ho scoperto che funziona più affidabile se, piuttosto che mettere ontouchstart="" in ogni link, inseriscilo nel tag <body>. Così il vostro tag body dovrebbe assomigliare a questa <body ontouchstart=""> e il vostro link simile a questa

<a href="#teamdiv"> 
    <div class="boxbutton" id="teambb"> 
    <h5>Team</h5> 
    </div></a>

EDIT 2: Ho capito che, piuttosto che copiare il CSS e utilizzare le query dimensioni dello schermo per desktop, basta aggiungere `onmouseover = "" anche al tag body, quindi la: pseudo classe attiva verrà richiamata dal mouse sul desktop E toccando sul cellulare. Puoi semplicemente ignorare il vagabondare delle query multimediali se lo fai.

fonte

2012-10-26 03:23:30

thx, funziona per me. – Mario

Questo funziona. Grazie. Ma mi piacerebbe una spiegazione di * why * onuchstart = "" e onmouseover = "" ottenere l'effetto desiderato. Certamente non è evidente per me. –

Beh, potrei non essere la persona migliore per spiegarlo, ma il modo in cui lo capisco è questo: onuchstart e onmouseover sono ascoltatori, aspettano che l'elemento in questione venga toccato o fatto il mouse (in questo caso) quindi chiamerebbero la funzione javascript che si chiama all'interno delle virgolette. Nel nostro caso, abbiamo lasciato le virgolette vuote, quindi non è stato eseguito alcuno script, ma poiché gli ascoltatori sono presenti, il browser Web continua a considerarli attivi. La pseudo classe: active viene applicata a un elemento se è attualmente attivo con javascript. Gli ascoltatori causano: pseudo classi attive da applicare. –

Se non si desidera modificare il codice HTML, si potrebbe provare questo:

<script> 
    document.body.addEventListener('touchstart',function(){},false); 
</script>

fonte

2013-09-06 10:00:12 RyanBay

Questo non funziona. – matthewpavkov

@matthewpavkov funzionerebbe ma dovrebbe essere addEventListener piuttosto che addEventlistener. –

Effetti al passaggio del mouse con gli eventi di tocco CSS3

risposta

Problemi correlati