Realmente no tengo experiencia en el uso de javascript, por lo que actualmente estoy probando los primeros pasos básicos para dominarlo.
Tengo estos cuatro cuadros div en el contenedor principal con la propiedad flexible , cada cuadro con un 25 % de ancho.
<section> <div class="box box1"></div> <div class="box box2"></div> <div class="box box3"></div> <div class="box box4"></div> </section>Al pasar el cursor sobre uno de los cuadros, ese cuadro en particular obtiene un 40% de ancho y los cuadros restantes se reducen al 20%.
Cuando hace clic en uno de los cuadros, ese cuadro obtiene un ancho del 85 % y los cuadros restantes se reducen al 5 %.
Si luego hace clic en otro cuadro, ese cuadro obtiene un ancho del 85 % y los cuadros restantes se reducen al 5 %.
Para volver a los cuadros de ancho total del 25%, usar una cruz simple hará el trabajo (aunque aún no lo he codificado).
Comencé tratando de hacer una solución completamente CSS usando casillas de verificación de entrada, pero rápidamente me di cuenta de que esto no funcionaría, ya que CSS no tiene un selector que pueda tener efecto en los hermanos anteriores.
Por lo tanto, necesito dos funciones de javascript.
(1) Al hacer clic en uno de los cuadros, ese elemento obtiene un cierto ancho, así como los cuadros restantes obtienen un ancho menor.
(2) Si ya ha hecho clic en uno de los cuadros, que ahora tiene un 85 % de ancho, si hace clic en uno de los otros cuadros, ese cuadro en particular ahora es "el seleccionado" y tendrá un 85 % de ancho.
Tengo la sensación de que son dos funciones simples. Simplemente no tengo experiencia en el uso de javascript, por lo que no estoy seguro de qué escribir.
Como dijo CherryDT, se puede hacer con flex-basis
O si se puede hacer con css, por ejemplo, grupo de radio y verificar
section { position: relative; display: flex; width: 100%; height: 100px; } input { appearance: none; display: block; padding: 0; margin: 0; width: 25%; height: 100%; } .box1 { background-color: rgba(0,0,0,.1) } .box2 { background-color: rgba(0,0,0,.2) } .box3 { background-color: rgba(0,0,0,.3) } .box4 { background-color: rgba(0,0,0,.4) } input:checked + section:hover input { width: 20%; } input:checked + section:hover input:hover { width: 40%; } input:not(:checked) + section input { width: 5%; } input:not(:checked) + section input:checked { width: 85%; } input:checked + section > label { display: none; } label { position: absolute; } <input id="hidden" hidden type="radio" name="group" class="box1" value="0" checked /> <section> <label for="hidden"> X </label> <input type="radio" name="group" class="box1" value="1"/> <input type="radio" name="group" class="box2" value="2"/> <input type="radio" name="group" class="box3" value="3"/> <input type="radio" name="group"class="box4" value="4"/> </section>Aquí hay una posible solución usando jQuery:
$(".box").on({ mouseenter: function(){ if ($(".box.clicked").length) return false; $(this).siblings(".box").css("width","20%"); $(this).css("width","40%"); }, mouseleave: function(){ if ($(".box.clicked").length) return false; $(this).siblings(".box").css("width","25%"); $(this).css("width","25%"); } }) $(".box").on("click", function(e){ $(".box.clicked").css("width","5%"); $(".box.clicked").removeClass("clicked"); $(this).addClass("clicked"); $(this).css("width","85%"); $(this).siblings(".box").css("width","5%"); if ($(e.target).hasClass("exit")) { $(this).removeClass("clicked"); $(this).css("width","25%"); $(this).siblings(".box").css("width","25%"); } }) * { margin: 0; padding: 0; } section { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 250px; } .box { width: 25%; height: 250px; position: relative; } .box1 { background-color: red; } .box2 { background-color: blue; } .box3 { background-color: green; } .box4 { background-color: yellow; } .box .exit { position: absolute; cursor: pointer; top: 5px; right: 10px; display: none; font-weight: bold; } .box.clicked .exit { display: block; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <meta charset="utf-8"> <section> <div class="box box1"> <p class="exit">×</p> </div> <div class="box box2"> <p class="exit">×</p> </div> <div class="box box3"> <p class="exit">×</p> </div> <div class="box box4"> <p class="exit">×</p> </div> </section>También puede asignar esas propiedades a las clases y luego simplemente agregar/eliminar clases en los eventos, pero la estructura será en general la misma.
La próxima vez, intente codificarse usted mismo primero y proporcione ejemplos de lo que ha intentado.