Ciao a tutti,
sto dando un'occhiata alle transizioni CSS non riesco a capire una cosa, non mi è chiara, vi sarei grato se mi aiutaste, dato il codice:
Perché il tempo della transizione si definisce direttamente nell'elemento div{} e non all'interno di div#contenitore:hover {} ?codice HTML:<!DOCTYPE html><html><head> <style> div { width: 100px; height: 100px; background: red; -webkit-transition: width 2s, height 4s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 4s, transform 2s; } div#contenitore:hover { width: 150px; height: 150px; z-index:100;position: absolute; } </style> </head><body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div><div id="contenitore"></div></div> <p>Hover over the div element above, to see the transition effect.</p> </body></html>
Infatti se sposto il codice del tempo all'interno di quest'ultimo il risultato finale cambia, perché, non riesco a capire, mi aiutereste per favore?
nel primo caso la transizione avviene sia all'entrare nell'elemento che all'uscire dall'elemento stesso, mentre nel secondo caso solo all'entrare, infatti uscendo dall'elemento div la trasformazione è istantanea.
Grazie,
Roberto
cambio:codice HTML:<!DOCTYPE html><html><head> <style> div { width: 100px; height: 100px; background: red; } div#contenitore:hover { width: 150px; height: 150px; z-index:100;position: absolute; -webkit-transition: width 2s, height 4s,-webkit-transform 2s; /* For Safari 3.1 to 6.0 */ transition: width 2s, height 4s, transform 2s; } </style> </head><body> <p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> <div><div id="contenitore"></div></div> <p>Hover over the div element above, to see the transition effect.</p> </body></html>
Rispondi quotando