Cada vez que cambio la clase "dark_mode", el color del borde de "width_animation" tiene una transición. ¿Alguna idea de cómo podría eliminar la transición del borde sin afectar la transición del ancho? Si elimino la transición de la clase "width_animation", el ancho volverá al ancho inicial después de no pasar el mouse y no quiero eso, quiero que sea suave.
function darkMode() { var element = document.body; element.classList.toggle("dark_mode"); } .dark_mode { background-color: #333; } .dark_mode .width_animation { border-color: red; } .product_container { width: 300px; height: 400px; background-color: grey; position: relative; } .width_animation { width: 100px; height: auto; color: white; background-color: black; border: 5px solid white; font-size: 30px; padding-left: 10px; position: absolute; right: 0px; top: 150px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .width_animation:hover { width: 200px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; cursor: pointer; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <button onclick="darkMode()">DARK MODE</button> <div class="product_container"> <div class="width_animation"> hover </div> </div> <script src="script.js"></script> </body> </html>Agrega ancho a la transición. Esto aplicará la transición solo al ancho. Asegúrate de agregarlo a ambas secciones. Vea abajo.
.width_animation { width: 100px; height: auto; color: white; background-color: black; border: 5px solid white; font-size: 30px; padding-left: 10px; position: absolute; right: 0px; top: 150px; -webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out; } .width_animation:hover { width: 200px; -webkit-transition: width 1s ease-in-out; transition: width 1s ease-in-out; cursor: pointer; }Puede que esté leyendo mal la pregunta, pero según tengo entendido, solo desea que el borde del cuadrado "flotante" sea rojo cuando el modo oscuro está habilitado, ¿verdad? Además, solo desea que la transición de ancho ocurra al pasar el mouse, y los dos deben ser mutuamente excluyentes. ¿Está bien?
.width_animation { width: 100px; height: auto; color: white; background-color: black; border: 5px solid white; font-size: 30px; padding-left: 10px; position: absolute; right: 0px; top: 150px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .dark_mode { background-color: #333; } /* The width_animation color transition will only apply when the parent object has dark_mode enabled */ .dark_mode > .product_container > .width_animation { border-color: red; } .product_container { width: 300px; height: 400px; background-color: grey; position: relative; } .width_animation:hover { width: 200px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; cursor: pointer; } Si quisiera hacer que el cuadrado de "desplazamiento" no se encoja después de que alguien salga de la animación de desplazamiento (basado en esta parte de su pregunta "the width will go back to initial width after no hover and i don't want that" ), deberá hacer que .width_animation:hover un estilo estático como el que se muestra a continuación, y luego use JavaScript para agregar/eliminar la clase al pasar el mouse según lo desee.
.width_animation { width: 100px; height: auto; color: white; background-color: black; border: 5px solid white; font-size: 30px; padding-left: 10px; position: absolute; right: 0px; top: 150px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; } .dark_mode { background-color: #333; } /* The width_animation color transition will only apply when the parent object has dark_mode enabled */ .dark_mode > .product_container > .width_animation { border-color: red; } .product_container { width: 300px; height: 400px; background-color: grey; position: relative; } .width_animation_hover { width: 200px; -webkit-transition: 1s ease-in-out; transition: 1s ease-in-out; cursor: pointer; } function darkMode() { var element = document.body; element.classList.toggle("dark_mode"); } var hover = document.getElementsByClassName("width_animation")[0]; hover.addEventListener("mouseenter", function( event ) { if ( hover.classList.contains("width_animation_hover") ) { event.target.classList.remove("width_animation_hover"); } else { event.target.classList.add("width_animation_hover"); } }).width_animation { -webkit-transition: width 1s ease-in-out, border 0.1s linear; transition: width 1s ease-in-out, border 0.1s linear; }Y no tiene que escribir la transición en el alcance de :hover{}. Porque tus transiciones hacia adelante y hacia atrás son las mismas.