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 {..} )