- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Cambiare dimensione div
-
Cambiare dimensione div
Buongiorno a tutti,
Sto creando un sito web e vorrei sapere se è possibile cambiare la dimensione di una div facendo l'hover su un'altra div.
Mi spiego, in una certa pagina ho un menu con diverse voci che al passaggio del mouse creano un box trasparente a cascata (div "box"). Ciò che voglio ottenere è l'allungamento di questo box quando "passo sopra" una certa voce (blue)
Il codice principale HTML è:...
<div class="menu_main">
<ul class="menu slide">
<li><a href="...." class="orange">NAME2</a></li>
<li><a href="...." class="blue">NAME1</a></li>
....
</ul>
<div class="box"></div>
</div>
...Mentre il codice CSS:
.....menu_main {
float:left;
font:normal bold 11px/35px verdana, sans-serif;
overflow:hidden;
position:relative;
left:50px;
}.menu_main .box {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(255, 250, 250, 0.5);
height:0;
width:900px;
}
.menu_main:hover div.box {
height:250px;
}...
.....ul.menu li a.blue:hover,ul.menu li:hover a.blue {
background:#c00;
}....
Grazie per la vostra attenzione. Spero di essere stato chiaro!
-
Ciao, ti consiglio, al posto dei CSS, l'utilizzo di jQuery, che è fatto apposta per questo genere di cose, mentre le pseudoclassi active, hover ecc mi sembrano un po' una forzatura, nonostante io stesso le usi spesso. Una soluzione in jQuery potrebbe essere:
$(document).ready(function(){
$(".primo").hover(
function(){
$(".secondo").css("width",500);
},
function(){
$(".secondo").css("width",200);
}
);
});
-
Grazie mille!!!! Grazie davvero, erano giorni che ci provavo e non riuscivo ad uscirne!
-
comunque un menù di quel tipo si può fare pure con il css giocando con opacity:0 o left:-9999px, l'importante è che ci sia l'hover che rende il menù visibile.