Salve a tutti, sto cercando di usare le transizioni css, ma non riescoad effettuare ci� che voglio. Il codice scritto � il seguente:
PAGINA HTML
codice HTML:
<div id="box-cd">
<div id="primo">Sono il primo figlio</div>
</div>
CODICE CSS
codice:
#box-cd {
width: 32%;
height: 350px;
border: solid 3px;
position: relative;
float: left;
margin-right: 15px;
margin-left: 3px;
background-color: blue;
}
#primo {
position: absolute;
height: 100px;
background-color: yellow;
top: 350px;
visibility: hidden;
float: left;
border: solid 3px;
margin-left: -3px;
}
#box-cd:hover > #primo {
background-color: red;
height: 100%;
width: 1227px;
visibility: visible;
transition-property: background-color, height, width, visibility;
/*standard*/
transition-duration: 2s, 2s, 4s, 2s;
-webkit-transition-property: background-color, height, width, visibility;
/*Safari e Chrome */
-webkit-transition-duration: 2s, 2s, 4s, 2s;
-o-transition-property: background-color, height, width, visibility;
/*Opera*/
-o-transition-duration: 2s, 2s, 4s, 2s;
-moz-transition-property: background-color, height, width, visibility;
/*Firefox*/
-moz-transition-duration: 2s, 2s, 4s, 2s;
transition-delay: 0s, 0s, 2s, 0s;
}
#primo:hover {
background-color: red;
height: 100%;
width: 1227px;
visibility: visible;
}
Il box "primo" ( figlio di box-cd) compare al passaggio del mouse su box-cd e questo mi va bene. Il problema riguarda la larghezza, perch� vorrei che "primo" occupasse tutta la pagina in orizzontale, ma impostando anche una width:100% questa ovviamente si riferisce al box contenitore che occupa solo il 32%.
Se primo non lo rendessi figlio di box-cd, non so come applicare la regola che al passaggio del mouse su box-cd deve verificarsi l'effetto su "primo", regola che al momento � attiva con il selettore figlio ( >) ovvero #box-cd:hover > #primo, ho provato anche il selettore fratello #box-cd:hover + #primo e ovviamento spostando i div uno di seguito all'altro nell'html ma non funge.
Sapete aiutarmi?