Condividi:
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: Anthony47, archimede, Triumph Of Steel
di 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>
<a href="#" >Sumptuous</a>
<a href="#" >Scintilla</a>
<a href="#" >Propinquity</a>
<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
di archimede » 29/11/14 12:13
Non vedo alcun effetto usando il codice da te postato (Firefox 33.1.1).
Alessandro
-
archimede
- Moderatore
-
- Post: 2851
- Iscritto il: 07/11/02 12:41
- Località: Genova
-
di 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
di 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>
<a href="#" >Sumptuous</a>
<a href="#" >Scintilla</a>
<a href="#" >Propinquity</a>
<a href="#" >Harbinger</a>
</div>
</body>
</html>
-
ketbra
- Utente Junior
-
- Post: 15
- Iscritto il: 01/07/14 09:44
di 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>
<a href="#">Sumptuous</a>
<a href="#">Scintilla</a>
<a href="#">Propinquity</a>
<a href="#">Harbinger</a>
</div>
</body>
</html>
Alessandro
-
archimede
- Moderatore
-
- Post: 2851
- Iscritto il: 07/11/02 12:41
- Località: Genova
-
Torna a Programmazione
Topic correlati a "problema transition css3":
Chi c’è in linea
Visitano il forum: Nessuno e 4 ospiti
