.ellenon { box-sizing: border-box; width: 350px; height:350px; background-image: url("https://wallpapercave.com/wp/wp5609581.jpg"); filter: grayscale(100%); color:white; transition: 0.5s; } .ellenon :where(h1, p) { line-height:1.5em; letter-spacing: 1.1px; padding-right: 10px; padding-left: 10px; transition: 0.5s; } .ellenon:hover { filter: grayscale(0%); } .ellenon h1:hover { transform: translate(0px, -20px); color:transparent; transition: 0.5s; } .ellenon p:hover { transform: translate(0px, 20px); color:transparent; transition: 0.5s; } .ellenon2:hover { transform: translate(0px, -20px); color:transparent; } <div class="ellenon"><a href="https://codepen.io/" class="ellenon2"><h1>What is Lorem Ipsum?</h1> <p> Lorem Ipsum is simply dummy text</p></a></div>Hola, estoy tratando de crear una animación CSS simple como puedes ver en mi código. Sin embargo, no puedo entender cómo ejecutar ambos desplazamientos una vez que el usuario se desplaza sobre el div externo. ¿Es esto posible con CSS sin procesar o se necesita JS?
Gracias
Puede seleccionar .outer:hover y .outer:hover .inner para que ambos cambien cuando se desplace el exterior
.outer{ width:100px; height:100px; background-color:orange; } .inner{ width:50px; height:50px; background-color:blue; } .outer:hover{ background-color:green; } .outer:hover .inner{ background-color:red; } <div class="outer"> <div class="inner"></div> </div>use .one:hover .two . si tienes el cursor sobre .one, cambias .two