Quiero expandir varias palabras abreviadas a la palabra completa al pasar el mouse (una elección estilística para un sitio web): piense "p| prkr" y al pasar el mouse cambia a "p| parker". Una vez que te alejas, vuelve atrás. Ejemplo (arriba a la izquierda).
¡No puedo por mi vida averiguar cómo hacer esto!
¿Intento usar display: none y on: hover show, pero creo que necesito algún tipo de javascript para hacer que la animación sea 'bonita'? ¿O esconder el retraso? He encontrado muchas animaciones de "escribir", pero nada como esto, pero creo que debería haber una manera de hacerlo. Además, ¿cómo lo anido para que la palabra sea un enlace? Necesito ocultar las vocales de alguna manera.
<nav> <div class="container"> <h1><a href="index.html"> <span class="let-1">p|</span> <span class="let-2">p</span> <span class="let-4">a</span> <span class="let-5">r</span> <span class="let-6">k</span> <span class="let-7">e</span> <span class="let-8">r</span> </a></h1> </div> </nav> nav.addEventListener('hover', function () { this.classList.toggle('is-active');Simplemente no puedo entender esto, ¡muchas gracias por cualquier ayuda! Nuevo en esto y agotado mis esfuerzos de búsqueda.
El siguiente fragmento debería darle una idea de cómo lograr algo similar a la referencia que envió.
body { background: #1d1e21; font-family: "Poppins", sans-serif; } a{ text-decoration: none; } .logo{ display: inline-flex; } .animated-logo{ display: flex; color: #fff; transition-property: transform; transition-duration: .15s; font-size: 2rem; font-weight: 600; } .letter{ display: inline; } .letter.first{ margin-right: 10px; } .letter.first:after{ content: '|'; font-weight: 200; font-size: 20px; margin-left: 10px; } .letter-hide { transform: scaleX(0); opacity: 0; transform-origin: 0 50%; transition: all .4s ease; width: 0; } .letter-hide:nth-of-type(3) { transition-delay: 50ms; } .letter-hide:nth-of-type(6) { transition-delay: 75ms; } .animated-logo:hover .letter-hide { width: 100%; opacity: 1; transform: scaleX(1); } <a href="#" class="logo"> <h3 class="animated-logo"> <span class="letter first">p</span> <span class="letter">p</span> <span class="letter-hide">a</span> <span class="letter">r</span> <span class="letter">k</span> <span class="letter-hide">e</span> <span class="letter">r</span> </h3> </a>Una forma bastante simple de hacer esto es ocultar el texto completo hasta que pase el mouse, mostrando al principio solo un pseudo elemento anterior cuyo contenido es la versión abreviada que se encuentra en un atributo de datos. Al pasar el mouse, la versión completa se revela dibujando un pseudo elemento opaco después.
De esa manera, se puede hacer a través de CSS y el HTML está un poco menos abarrotado.
[data-full] { position: relative; display: inline-block; color: transparent; } [data-full]:hover { color: black; } [data-full]::before { content: attr(data-full); color: black; position: absolute; top: 0; left: 0; z-index: 0; } [data-full]:hover::before { color: transparent; } [data-full]::after { content: ''; width: 100%; height: 100%; background-color: white; position: absolute; top: 0; right: 0; transition: width 2s linear; z-index: -1; display: inline-block; } [data-full]:hover::after { content: ''; width: 0; z-index: 1; } <div class="start">p| <span data-full="prkr">parker</span></div>Usando un poco de Javascript, por supuesto, podría obtener los tiempos más uniformes para cualquier longitud de palabra. También si se sabe que el carácter inicial de la palabra es siempre lo que está antes de la barra vertical que JS podría extraer y mostrar sin necesidad de tenerlo en un elemento separado en el HTML inicial. Del mismo modo, JS podría usarse para deshacerse de las vocales, creando el atributo de datos en tiempo de ejecución, haciendo que el HTML sea aún más simple.