Tengo un flexbox de pantalla completa dividido en dos divs iguales. En el div de la izquierda tengo una lista desordenada de enlaces. Al pasar el mouse sobre cada enlace, quiero que la imagen de fondo en el div de la derecha cambie a una imagen diferente. Pude hacer que esto funcione usando javascript, pero quiero agregar una animación cuando cambie la imagen. La transición en la imagen de fondo funciona cuando la página se carga por primera vez, pero no cuando paso el mouse sobre los enlaces: la imagen cambia, pero no hay animación. Intenté usar el selector de hermanos para apuntar al div de la derecha cuando paso el mouse sobre el enlace, pero no funciona, creo que esto se debe a que, si bien el div adjunto del menú es un hermano del div de la derecha, el enlace en el menú no lo es. He proporcionado una versión simplificada a continuación con colores en lugar de imágenes. Ii lo que estoy tratando de hacer posible? Cualquier sugerencia con gusto recibida!
function setImage(x) { switch (x) { case 0: document.getElementById("right-photo").style.background="yellow" break; case 1: document.getElementById("right-photo").style.background="green" break; case 2: document.getElementById("right-photo").style.background="pink" break; case 3: document.getElementById("right-photo").style.background="orange" break; } } .page{ height: 100vh; width: 100vw; background: yellow; display: flex; } .left-menu, .right-photo{ height: 100%; width: 50%; } .left-menu{ background: red; } .right-photo{ background: blue; animation: fadein 2s; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } <div class="page"> <div class="left-menu"> <ul> <li><a href="#"onmouseover="setImage(1)" onmouseout="setImage(0)">First</a></li> <li><a href="#"onmouseover="setImage(2)" onmouseout="setImage(0)">Second</a></li> <li><a href="#"onmouseover="setImage(3)" onmouseout="setImage(0)">Third</a></li> </ul> </div> <div class="right-photo" id="right-photo"></div> </div>El hecho de que defina una animación no significa que la animación se esté reproduciendo automáticamente. Puede definir qué propiedad desea animar, luego se animará cada vez que la cambie. Para su ejemplo, configuré la transition: background 1s para su división derecha.
function setImage(x) { switch (x) { case 0: document.getElementById("right-photo").style.background = "yellow" break; case 1: document.getElementById("right-photo").style.background = "green" break; case 2: document.getElementById("right-photo").style.background = "pink" break; case 3: document.getElementById("right-photo").style.background = "orange" break; } } .page { height: 100vh; width: 100vw; background: yellow; display: flex; } .left-menu, .right-photo { height: 100%; width: 50%; } .left-menu { background: red; } .right-photo { background: blue; transition: background 1s; } <div class="page"> <div class="left-menu"> <ul> <li><a href="#" onmouseover="setImage(1)" onmouseout="setImage(0)">First</a></li> <li><a href="#" onmouseover="setImage(2)" onmouseout="setImage(0)">Second</a></li> <li><a href="#" onmouseover="setImage(3)" onmouseout="setImage(0)">Third</a></li> </ul> </div> <div class="right-photo" id="right-photo"></div> </div>