Valutazione 4.87/ 5 (100.00%) 5838 voti

Condividi:        

problema transition css3

Problemi di HTML? Di PHP, ASP, .NET, JSP, Perl, SQL, JavaScript, Visual Basic..?
Vuoi realizzare programmi in C, C++, Java, Ruby o Smalltalk, e non sai da che parte cominciare?
Entra qui e troverai le risposte!

Moderatori: Triumph Of Steel, archimede

problema transition css3

Postdi ketbra » 29/11/14 11:38

Ciao a tutti,

ho un problemino nell'implementazione di un effetto rollover in css3.
Quello che vorrei fare è aumentare le dimensioni del link sopra il quel passo il mouse di 1,2 volte la dimensione in una transizione che dura un secondo.Quello che succede è che la transizione avviene nel tempo stabilito ma, una volta trascorso il secondo,pur mantenendo il cursore del mouse sempre sul link,le dimensioni tornano quelle di partenza.
Posto il codice:

Codice: Seleziona tutto
<html>


<head>
      <title>prova</title>
      <style>
         
       

         .box{ width:800px;
                     height:50px;
                     border:thin solid black;
                     text-align:center;
                     margin:auto;
                     
                
                         
                    }

         .box a {
                         color: gray;
                         font-weight: 900;
                         text-shadow: none;
                         text-decoration:none;
                         
                      }



         .box a:hover{transition-duration: 1s;
                      transition-property: transform;
                      transform:scale(1.2);
                     
                      color:red;
                       }

         

        </style>
       </head>
     <body>
         
          <div class="box">

<a href="#" >Desultory</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Sumptuous</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Scintilla</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Propinquity</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Harbinger</a>

</div>

    </body>
  </html>


dove sto sbagliando?

Inoltre vorrei sapere dove devo mettere le istruzioni relative alla trnasizione...le devo mettere tutte su hover come ho fatto oppure le posso anche mettere direttamente sul codice relativo solo al link prima del passaggio nel mouse? (cioè .... .box a {..} )
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Sponsor
 

Postdi archimede » 29/11/14 12:13

Non vedo alcun effetto usando il codice da te postato (Firefox 33.1.1).

Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova

Postdi ketbra » 29/11/14 14:29

ah, non avevo controllato su firefox...su chrome avviene quello che ho descritto..perchè su firefox non va?
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Postdi ketbra » 29/11/14 15:38

ho provato a modificare il codice ma non cambia nulla....su firefox è come se non ci fosse transizione...passa immediatamente al colore assegnato in :hover...

Codice: Seleziona tutto
<html>


<head>
      <title>prova</title>
      <style>
         
       

         .box{ width:800px;
                     height:50px;
                     border:thin solid black;
                     text-align:center;
                     margin:auto;
                     
                
                         
                    }

         .box a {
                         color: gray;
                         font-weight: 900;
                         text-shadow: none;
                         text-decoration:none;

                       -webkit-transition-duration: 1s;
                        -webkit-transition-property: transform ;

                        -o-transition-duration: 1s;
                        -o-transition-property: transform ;


                        -moz-transition-duration: 1s;
                        -moz-transition-property: transform ;


                        -ms-transition-duration: 1s;
                        -ms-transition-property: transform ;
                       

                 
                      }



         .box a:hover{


                       
     
                      transform:scale(1.2);
                     
                      color:red;
                       }

         

        </style>
       </head>
     <body>
         
          <div class="box">

<a href="#" >Desultory</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Sumptuous</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Scintilla</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Propinquity</a> &nbsp;&nbsp;&nbsp;

<a href="#" >Harbinger</a>

</div>

    </body>
  </html>
ketbra
Utente Junior
 
Post: 15
Iscritto il: 01/07/14 09:44

Postdi archimede » 29/11/14 16:50

Troppo banale?
Codice: Seleziona tutto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>prova</title>
<style type="text/css">
 .box{ width:800px;
        height:50px;
        border:thin solid black;
        text-align:center;
        margin:auto;
  }

 .box a {
       color: gray;
       font-weight: 900;
       text-shadow: none;
       text-decoration:none;
       -webkit-transition: 1s ease;
       -moz-transition: 1s ease;
       -o-transition: 1s ease;
       transition: 1s ease;
 }

 .box a:hover{
    color: red;
    font-size: 150%;
  }
</style>
</head>
<body>
<div class="box">
  <a href="#">Desultory</a> &nbsp;&nbsp;&nbsp;
  <a href="#">Sumptuous</a> &nbsp;&nbsp;&nbsp;
  <a href="#">Scintilla</a> &nbsp;&nbsp;&nbsp;
  <a href="#">Propinquity</a> &nbsp;&nbsp;&nbsp;
  <a href="#">Harbinger</a>
</div>
</body>
</html>
Alessandro
archimede
Moderatore
 
Post: 2755
Iscritto il: 07/11/02 12:41
Località: Genova


Torna a Programmazione


Topic correlati a "problema transition css3":

Problema Windows 10
Autore: asso1998
Forum: Software Windows
Risposte: 1

Chi c’è in linea

Visitano il forum: Nessuno e 6 ospiti