en el ejemplo a continuación, ¿es posible expandir los niños flexibles a ancho completo al pasar el mouse solo con css o debería hacerlo con javascript? Nota: es importante usar flexbox en este escenario. y si no es posible crearlo con css, ¿puede sugerir una funcionalidad de javascript para este problema?
html { box-sizing: border-box; background: #ffc600; font-family: 'sans-serif'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; position: relative; } .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; text-align: center; align-items: center; transition: transform 0.2s, flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; display: flex; flex-direction: column; justify-content: center; } .panel a{ color:#fff; font-weight: bold; font-size: 20px; text-decoration: none; text-shadow: 1px 2px rgba(0,0,0,.7); } .panel:hover{ flex:2 } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } <div class="panels"> <div class="panel panel1"><a href="">link1</a></div> <div class="panel panel2"><a href="">link2</a></div> <div class="panel panel3"><a href="">link3</a></div> <div class="panel panel4"><a href="">link4</a></div> <div class="panel panel5"><a href="">link5</a></div> </div>agregar min-width:0;overflow:hidden; a todo el panel y luego al pasar el mouse use flex-basis:100%
html { box-sizing: border-box; background: #ffc600; font-family: 'sans-serif'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; position: relative; } .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.1); color: white; text-align: center; align-items: center; transition: transform 0.2s, flex 0.7s cubic-bezier(0.61, -0.19, 0.7, -0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; min-width:0; overflow:hidden; display: flex; flex-direction: column; justify-content: center; } .panel a { color: #fff; font-weight: bold; font-size: 20px; text-decoration: none; text-shadow: 1px 2px rgba(0, 0, 0, .7); } .panel:hover { flex-basis: 100%; } .panel1 { background-image: url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image: url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { background-image: url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panel4 { background-image: url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image: url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } <div class="panels"> <div class="panel panel1"><a href="">link1</a></div> <div class="panel panel2"><a href="">link2</a></div> <div class="panel panel3"><a href="">link3</a></div> <div class="panel panel4"><a href="">link4</a></div> <div class="panel panel5"><a href="">link5</a></div> </div>Solución: Oculte todos los elementos secundarios al pasar el mouse excepto el que está debajo del puntero del mouse
Se puede hacer con css puro:
.panels:hover .panel:not(:hover) { display: none; }Aquí está el fragmento actualizado:
html { box-sizing: border-box; background: #ffc600; font-family: 'sans-serif'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; position: relative; } .panel { background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; text-align: center; align-items: center; transition: transform 0.2s, flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11), background 0.2s; font-size: 20px; background-size: cover; background-position: center; flex: 1; display: flex; flex-direction: column; justify-content: center; } .panel a{ color:#fff; font-weight: bold; font-size: 20px; text-decoration: none; text-shadow: 1px 2px rgba(0,0,0,.7); } .panel:hover{ flex: 2; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); } .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); } .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); } .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); } .panels:hover .panel:not(:hover) { display: none; } <div class="panels"> <div class="panel panel1"><a href="">link1</a></div> <div class="panel panel2"><a href="">link2</a></div> <div class="panel panel3"><a href="">link3</a></div> <div class="panel panel4"><a href="">link4</a></div> <div class="panel panel5"><a href="">link5</a></div> </div>Tu puedes hacer
.panel:hover{ flex-basis: 100%; }
Reducirá el resto al mínimo y expandirá el que se encuentra en el aire. Compruebe si esto ayuda.