Visualizzazione dei risultati da 1 a 4 su 4
  1. #1

    Sostituire hover con un delay

    Salve, vorrei sapere se fosse possibile sostituire l'hover con un ritardo (delay).

    Nello specifico, vorrei che il colore di sfondo di un div cambi dopo un secondo dal caricamento pagina anzichè al passaggio del mouse.

    Grazie in anticipo

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Ciao, puoi usare animation e impostare lì il delay.

    Un semplice esempio:
    codice:
    <!DOCTYPE HTML>
    <html>
      <head>
        <title>Esempio</title>
        <meta charset="utf-8">
        <style type="text/css">
          @keyframes cambiasfondo{
            0%   { background: #fff }
            100% { background: #f00 }
          }
          #tuo-div{
            animation: cambiasfondo .5s ease-out forwards 1s;
            /* per esteso
              animation-name: cambiasfondo;
              animation-duration: .5s;
              animation-timing-function: ease-out;
              animation-fill-mode: forwards;
              animation-delay: 1s;
            */
          }
        </style>
      </head>
      <body>
        <div id="tuo-div">Lorem ipsum dolor sit amet</div>
      </body>
    </html>
    A riguardo, puoi trovare altri riferimenti interessanti al capitolo 8 dei link utili CSS, sotto la voce "Animazioni".
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

  3. #3
    Grazie, il css3 animation sembra essere la soluzione migliore.

    Unico problema, su Explorer l'animazione non parte.

    Hai consigli?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,684
    Tale proprietà è pienamente supportata dai moderni browser.

    Prosegui su questa discussione per maggiori chiarimenti:
    http://forum.html.it/forum/showthrea...1#post25457138

    Se il metodo CSS non ti soddisfa allora puoi agire via JavaScript impostando opportunamente un setTimeout o qualcosa del genere e applicando quindi lo style da lì. Nel caso chiedi su JavaScript.
    Installa Forum HTML.it Toolset per una fruizione ottimale del Forum

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.