Hover-Effekte mit CSS3-Berührungsereignissen

Ich bin mit CSS3 hover-und übergänge zum ein-und ausblenden eines Bildes. Auf mobilen Geräten möchte ich nutzen, den gleichen übergang für touch-Ereignisse.

Grundsätzlich die erste Berührung führen würde den hover-Effekt oder rollover, und die touch-up durchführen würde den roll-off.

Möchte ich bleiben Weg von der Verwendung von JavaScript, das zu tun. Wenn es einen Weg gibt, es zu tun, die mit reinem CSS3-das wäre die beste option.

InformationsquelleAutor der Frage mattwallace | 2011-11-30

  1. 65

    Verwenden Sie die :active pseudo-Klasse in der css, dann fügen Sie ontouchstart="" und onmouseover="" dem body-tag.

    Folgende code ist ein Auszug aus meiner Website, in der ich buttons, die immer kleiner und leuchtet weiß, wenn schwebte(auf pcs) oder gedrückt(auf touch-Geräten)

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

    Die folgenden Bearbeitungen sind nicht mehr relevant, weil ich nach dem löschen der ursprünglichen, falschen Anweisungen, aber wenn Sie hier waren, bevor diese vielleicht noch hilfreich

    EDIT: ich habe entdeckt, das es funktioniert zuverlässiger, wenn, anstatt ontouchstart="" an jedem Glied, steckte es in die <body> tag. Also dein body-tag sollte so Aussehen<body ontouchstart=""> und Ihre links wie folgt Aussehen 

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

    EDIT 2: ich habe herausgefunden, dass, anstatt das kopieren von CSS und screen-Größe Abfragen für desktop, nur hinzufügen `onmouseover="" in den body-tag auch, also die :active-Pseudoklasse wird aufgerufen werden, indem Sie mit der Maus auf den desktop UND durch die Berührungen auf dem Handy. Sie können einfach ignorieren, das Wandern über media-queries, wenn Sie dies tun.

    InformationsquelleAutor der Antwort Chuck Dries

  2. 5

    Wenn Sie nicht möchten, ändern Sie Ihre HTML-code, die Sie könnten versuchen, diese:

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

    InformationsquelleAutor der Antwort RyanBay

Schreibe einen Kommentar