0
323
VistasEstablezca el margen del contenido principal en relación con el ancho de la barra lateral receptiva en css
Tengo una página web html que contiene una barra lateral receptiva (el ancho de la barra lateral cambia al pasar el mouse). Quiero que el contenido principal tenga un margen relativo al ancho de la barra lateral. Por favor, ayúdenme a lograr esto usando css> Por ejemplo:
antes de pasar el cursor sobre la barra lateral:
Después de pasar el cursor sobre la barra lateral: 
1 Respuestas
Responde la pregunta0
Con el ejemplo de tu foto, supongo que te refieres al ancho en lugar del margen, y solo quieres asegurarte de que los divs no se superpongan.
Puede usar flexbox, de modo que el elemento .content tome el ancho restante cuando cambie el ancho de la barra lateral. Luego puede establecer el ancho inicial de .sidebar, luego cambiar el ancho al pasar el mouse.
Aquí hay un ejemplo:
/* For style */ .sidebar span, .content span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: sans-serif; } .sidebar { background: #4C559F; cursor: pointer; } .content { background: #4F9DD4; } .sidebar, .content { position: relative; transition: width 0.1s; } /* Important */ .container { height: 200px; display: flex; flex-direction: row; } .sidebar { width: 20%; margin-right: 10px; /* Your set margin */ } .sidebar:hover { width: 40%; } .content { flex-grow: 1; } <div class="container"> <div class="sidebar"><span>sidebar</span></div> <div class="content"><span>content</span></div> </div>Sin embargo, si desea mover el elemento de contenido usando margin. . . tendrá que usar javascript para agregar una clase al contenedor o elemento del cuerpo cuando pase el cursor por la barra lateral. . . luego diseñe el margen del contenedor al tamaño necesario. . . orrr calcularlo dinámicamente usando javascript.
Espero que esto ayude. ¡Dios los bendiga!