Tengo un padre div con algunos niños:
<div id="main"> <div id="child1"> <div id="child2"> <div id="child3">content</div> </div> </div> </div>El CSS es:
#main {width: 700px;} #child1 {width: 150px;} #child2 {width: 100%;} #child3 {width: 100%;}Al pasar el mouse, quiero que #child3 se expanda al 90 % del ancho de #main , no se limite a los 150 px de su padre.
Intenté darle a #child3 un ancho fijo en px, pero eso causó muchos problemas con el contenido que se derramaba fuera del div #main . Quiero mantener el contenido expandido de #child3 dentro de #main en todo momento.
¿Se puede hacer esto con JavaScript o jQuery? Por favor avise. ¡Gracias!
JSFiddle aquí.
Considera lo siguiente.
$(function() { $("#child3").hover(function() { // In $(this).css("width", $("#main").width() * 0.9); }, function() { // Out $(this).css("width", ""); }); }); #main { width: 700px; box-shadow: inset 0 0 0 1px #000; padding: 10px; } #child1 { width: 150px; } #child2 { width: 100%; } #child3 { width: 100%; box-shadow: inset 0 0 0 1px #c00; padding: 40px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <div id="child1"> <div id="child2"> <div id="child3">content</div> </div> </div> </div> Usando .hover() , .css .css() , .width() puedes calcular un nuevo ancho que es 90% del ancho de otro elemento. Puede asignar esto y luego reasignarlo después.
Ver más: