Cada vez que paso el cursor sobre uno de los elementos de mi lista, todo comienza a parpadear y se mueve de un lado a otro. Lo que quiero hacer es tener esta lista. Al pasar el cursor sobre uno de los elementos, debería imprimir el texto en el lado derecho de la imagen. Me gustaría que la imagen que estoy moviendo permanezca en su lugar mientras todo lo demás se mueve a un lado y el texto tiene un efecto de máquina de escribir aplicado.
var nav = document.querySelectorAll('#nav li'); for (i = 0; i < nav.length; i++) { nav[i].className = 'hover' } var pnav = document.querySelectorAll('#nav p'); for (i = 0; i < pnav.length; i++) { pnav[i].className = 'typewriter' } body { background-color: #0f1621; margin: 0; display: flex; justify-content: center; min-height: 100%; } #nav { margin-top: 25%; } #nav li { display: inline-block; padding: 2px; color: white; } .hover a:hover+p { display: inline-block; } p { display: none; font-size: 20px; } .typewriter { color: #fff; font-family: monospace; overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; border-right: .15em solid orange; animation: typing 1s steps(30, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } } <ul id="nav"> <li> <a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a> <p> Socials</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a> <p> LinkedIn</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a> <p> Resume</p> </li> </ul>Cambio #nav a flex y algunas propiedades css en .hover a:hover+p y p. Luego tuve pequeños problemas para ajustar el texto en la parte inferior al lado del cuadro de color. Uso margen superior: xxxPX. Tal vez exista una mejor solución para colocar el texto. Pero funciona.
var nav = document.querySelectorAll('#nav li'); for (i = 0; i < nav.length; i++) { nav[i].className = 'hover' } var pnav = document.querySelectorAll('#nav p'); for (i = 0; i < pnav.length; i++) { pnav[i].className = 'typewriter' } body { background-color: #0f1621; margin: 0; display: flex; justify-content: center; height: 100vh; } #nav { margin-top: 5%; display:flex; } #nav li { display: flex; padding: 2px; color: white; } .hover a:hover+p { display: block; margin-bottom: auto; margin-top: auto; margin-top:127px; } p { display: none; font-size: 20px; } .typewriter { color: #fff; font-family: monospace; overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; border-right: .15em solid orange; animation: typing 1s steps(30, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink-caret { from, to { border-color: transparent } 50% { border-color: orange; } } <ul id="nav"> <li> <a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a> <p> Socials</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a> <p> LinkedIn</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a> <p> Resume</p> </li> </ul>Me tomó más tiempo de lo esperado porque estaba seguro de que había un error en el script, pero estaba equivocado, el problema es con el @keyframes typing , simplemente cambie el ancho al 35% y su problema se resolverá
@keyframes typing { from { width: 0; } to { width: 35%; } } var nav = document.querySelectorAll('#nav li'); for (i = 0; i < nav.length; i++) { nav[i].className = 'hover' } var pnav = document.querySelectorAll('#nav p'); for (i = 0; i < pnav.length; i++) { pnav[i].className = 'typewriter' } body { background-color: #0f1621; margin: 0; display: flex; justify-content: center; min-height: 100%; } #nav { margin-top: 25%; } #nav li { display: inline-block; padding: 2px; color: white; } .hover a:hover+p { display: inline-block; } p { display: none; font-size: 20px; } .typewriter { color: #fff; font-family: monospace; overflow: hidden; white-space: nowrap; margin: 0 auto; letter-spacing: .15em; border-right: .15em solid orange; animation: typing 1s steps(30, end), blink-caret .75s step-end infinite; } @keyframes typing { from { width: 0; } to { width: 35%; } } @keyframes blink-caret { from, to { border-color: transparent; } 50% { border-color: orange; } } <ul id="nav"> <li> <a href=""><img src="https://via.placeholder.com/150/0000FF/808080/?text=folder.png"></a> <p> Socials</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FF0000/FFFFFF/?text=linkedin.png"></a> <p> LinkedIn</p> </li> <li> <a href=""><img src="https://via.placeholder.com/150/FFFF00/000000/?text=CV.png"></a> <p> Resume</p> </li> </ul>He resuelto tu problema. Es bastante fácil de resolver todo lo que necesita para agregar el siguiente código a su CSS.
Primero de su #nav necesita una propiedad de visualización:
display:flex;
En segundo lugar, su #nav li necesita las siguientes propiedades:
display:flex;
align-items:flex-end;
Espero que esto solucione tu problema...