Tengo una fila de cartas superpuestas en una fila. Cuando muevo el mouse sobre una tarjeta, la tarjeta debe extenderse hacia la izquierda para que se vea toda la tarjeta. Desafortunadamente, este efecto cambia el ancho total.
Pregunta: ¿Qué debo hacer para que el ancho total permanezca igual al pasar el mouse?
:root { --slide-margin: 44px; --slide-duration: 0.5s; } .w { background-color: lightgray; display: flex; justify-content: center; padding: 20px; } .w > div { box-sizing: border-box; padding: 10px; width: 150px; height: 150px; margin-left: -75px; transition: all var(--slide-duration) ease-out; } .w > div:hover{ margin-left: -75px; margin-right: 75px; background: black; } .w > div > span { background: inherit; background-clip: text; color: transparent; filter: invert(1) grayscale(1); } .a { background-color: lightblue; } .b { background-color: lightgreen; } .c { background-color: brown; } .d { background-color: purple; } <div class="w"> <div class="a"><span>A</span></div> <div class="b"><span>B</span></div> <div class="c"><span>C</span></div> <div class="d"><span>D</span></div> </div>Puede introducir un quinto div falso que comparte el color de fondo con el elemento contenedor, cubriendo efectivamente la mitad derecha de div.d inicialmente:
:root { --slide-margin: 44px; --slide-duration: 0.5s; } .w { background-color: lightgray; display: flex; justify-content: center; padding: 20px; } .w > div { box-sizing: border-box; padding: 10px; width: 150px; height: 150px; margin-left: -75px; transition: all var(--slide-duration) ease-out; } .w > div[class]:hover{ margin-left: -75px; margin-right: 75px; background: black; } .w > div[class]:hover ~ div[class] { margin-right: 0; } .w > div > span { background: inherit; background-clip: text; color: transparent; filter: invert(1) grayscale(1); } .a { background-color: lightblue; } .b { background-color: lightgreen; } .c { background-color: brown; } .d { background-color: purple; margin-right: 75px; } .w > div:not([class]) { background-color: lightgray; } <div class="w"> <div class="a"><span>A</span></div> <div class="b"><span>B</span></div> <div class="c"><span>C</span></div> <div class="d"><span>D</span></div> <div></div> </div>Debido a la naturaleza de las transiciones, el contenedor aún se tambalea un poco cuando se desplaza rápidamente, pero mucho menos que con su código.
Creo que eso es lo que necesitas. Hago position:relative con el uso de la derecha, izquierda.
Dio margin-left a todas las casillas excepto a la primera.
.box:nth-child(1) ~ .box{ margin-left:-75px; } Debido al uso de margin , el contenedor tomará la suma de los anchos de todas las cajas.
Al pasar el primer cuadro, dio a todos los demás hermanos right:-75px
.box:nth-child(1):hover ~ .box { right: -75px; } *, *::before, *::after { box-sizing: border-box; } body { min-height: 100vh; margin: 0; background-color: bisque; display: grid; place-content: center; } :root { --slide-margin: 44px; --slide-duration: 0.5s; } .container { background-color: lightgray; display: flex; justify-content: center; overflow: hidden; width: min-content; } .box { box-sizing: border-box; padding: 10px; width: 150px; height: 150px; transition: all var(--slide-duration) ease-out; position: relative; right: 0; } .box:nth-child(1) ~ .box{ margin-left:-75px; } .box:hover{ background-color: black; } .box:nth-child(1):hover ~ .box { right: -75px; } .box:nth-child(3):hover, .box:nth-child(2):hover{ right: 75px; } .a { background-color: lightblue; } .b { background-color: lightgreen; } .c { background-color: brown; } .d { background-color: purple; } <div class="container"> <div class="a box"><span>A</span></div> <div class="b box"><span>B</span></div> <div class="c box"><span>C</span></div> <div class="d box"><span>D</span></div> </div>¿¿Quieres decir así?? .
$(".a").mouseover(function(){ $(".a").css("margin-left", "-150px") }); $(".b").mouseover(function(){ $(".a").css("margin-left", "-150px") }); $(".c").mouseover(function(){ $(".a").css("margin-left", "-150px") $(".b").css("margin-left", "-75px") }); $(".d").mouseover(function(){ $(".a, .b, .c, .d").css("margin-left", "-75px") }); $(".w").mouseout(function(){ $(".a, .b, .c, .d").css("margin-left", "-75px") }); :root { --slide-margin: 44px; --slide-duration: 0.5s; } .w { background-color: lightgray; display: flex; justify-content: center; padding: 20px; } .w > div { box-sizing: border-box; padding: 10px; width: 150px; height: 150px; margin-left: -75px; transition: all var(--slide-duration) ease-out; } .a:hover{ margin-right: 75px; background: black; } .b:hover{ margin-left: -75px; margin-right: 75px; background: black; } .c:hover{ margin-right: 75px; background: black; } .d:hover{ background: black; } .w > div > span { background: inherit; background-clip: text; color: transparent; filter: invert(1) grayscale(1); } .a { background-color: lightblue; } .b { background-color: lightgreen; } .c { background-color: brown; } .d { background-color: purple; } <script src="https://code.jquery.com/jquery-3.5.0.js"></script> <div class="w"> <div class="a"><span>A</span></div> <div class="b"><span>B</span></div> <div class="c"><span>C</span></div> <div class="d"><span>D</span></div> </div>