https://codepen.io/jenny0515/pen/KKZKyaB
Si abre el enlace de arriba, verá que cualquiera que sea el cubo sobre el que pase el mouse, el que se detiene se detiene y aumenta gradualmente a un tamaño más grande, mientras que los otros se detienen abruptamente y también se vuelven más grandes. Pero lo que he estado tratando de lograr es que, mientras me muevo sobre el cubo que entra, los otros que no están sobre ellos deben salir. No creo que sea posible lograrlo en CSS, pero dado que soy bastante nuevo en la codificación, ¿tal vez haya una posibilidad? Pero si no, estoy bien usando JS para tratar de invadir los cubos sobre los que no se está flotando, para que puedan encogerse o salir, mientras que el que está sobre el que se está flotando entra, este último sin ninguna ayuda de JS, si es posible.
Aquí hay una vista previa de mi código HTML, pero abra el enlace de arriba:
<div class="div"> <div class="circle"> <div class="stop-anim"> <div class="ease-in"> <div class="cube"><a href=""></a></div> <div class="cube"><a href=""></a></div> <div class="cube"><a href=""></a></div> </div> </div> </div> </div>Hice algunos intentos usando solo CSS pero no funcionó.
No se necesita js aquí. En primer lugar, defina las transiciones para todos los :hover , no solo para uno. De todos modos, solo se reproducirá cuando cambien las propiedades:
.ease-in .cube{ transition: width 2s ease-in, height 2s ease-in; } Aquí enumero solo las propiedades que vamos a cambiar con la transition , no con la animation .
A continuación, cambie los accesorios : :hover target .cube :
.ease-in .cube:hover{ width:100px; height:100px; }Y el resto cubos:
/* Selector takes cubes inside a hovered .ease-in, but those that are not hovered by themselves */ .ease-in:hover .cube:not(:hover){ width:15px; height:15px; }