De contenedores y posiciones

nicolasroma · #1 (**permalink**) 18/01/2012, 10:02

Hola.. tengo un div contenedor con 10 divs dentro.. lo que trato de hacer es que cuando haga mouse over sobre uno de los divs de adentro se agrande pero sin desplazar los divs vecinos que tambien estan dentro del contenedor alguien seria tan amable de iluminarme con esto?

les dejo la dire para que lo vean como anda.. http://www.nicolasroma.com.ar/HTML/A0001.html

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.gral { width:540px; background-color:#00CC33; margin:auto; padding:5px; overflow:auto;}
.box  { height:80px; width:80px; background-color:#66FF33; margin:5px; float:left; }
</style>
</head>
<body>

<div class='gral'>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
	<div class="box">
	</div>
</div>

<script type="text/javascript">

var box = document.getElementsByTagName('div');
function agrandar(){ this.style.width = '100px'; this.style.height = '100px'; }
function achicar(){ this.style.width = '80px'; this.style.height = '80px'; }

for (i=1;i<box.length;i++)
{
	box[i].onmouseover = agrandar;
	box[i].onmouseout = achicar;
}
</script>

</body>
</html>

cristian_cena · #2 (**permalink**) 18/01/2012, 12:06

No se si podes pero una solución sería trabajar con un contenedor relativo e hijos con posición absoluta. Los cuales como ahora dependerán del 0,0 de su contenedor pueden tomar posición con top/left/bottom/right.
Luego en el hover modificas el width/height del elemento en cuestión y los vecinos ni se enteran, salvo tal vez por su nivel de apilado, lo que controlas con z-index. Tal vez des a todos un valor de z-index y cuando entra el raton en un elemento subes a éste su valor de z-index, y cuando sale el raton se lo quitas.

yo intentaría con eso.
Saludos.

nicolasroma · #3 (**permalink**) 18/01/2012, 12:16

Gracias cristina por tu respuesta... te re pregunto para ver si te entendí, tendría que poner position:absolute a todos los child del contenedor de manera individual. para que estén ubicados en relación al contenedor?...

nicolasroma · #4 (**permalink**) 18/01/2012, 12:16

perdon escribi mal tu nombre Cristian

cristian_cena · #5 (**permalink**) 18/01/2012, 12:44

emm

jaja.

si a todos.

Código CSS:

Ver original.gral{ position:relative; width:...; height:...;}
.box{ position:absolute; width:...; height:...; z-index:0;}
#box1{top:...; left:...;} /*y luego cada uno con sus cotas*/

kseso? · #6 (**permalink**) 18/01/2012, 16:41

Al :hover aplicar transform: scale(n)