Estoy tratando de hacer un sitio web donde pasar el mouse sobre un error ortográfico que consiste en la transposición de dos letras lo corrige, así:
var swap = document.querySelector('.swap'); swap.addEventListener('mouseover', swapIn); swap.addEventListener('mouseout', swapOut); function swapIn(e) { e.target.parentNode.firstChild.classList.toggle('shifted-right'); e.target.parentNode.lastChild.classList.toggle('shifted-left'); } function swapOut(e) { e.target.parentNode.firstChild.classList.toggle('shifted-right'); e.target.parentNode.lastChild.classList.toggle('shifted-left'); } body { font-size: 24px; } .swap { display: inline; } span { -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; transition: all 0.3s linear; } .shifted-right { margin-left: 20px; color: blue; } .shifted-left { margin-left: -25px; color: red; } E<div class="swap" id="swap"><span class="left-swap" id="ls">q</span><span class="right-swap" id="rs">c</span></div>uis me vivit fortunatior?Sin embargo, como puede ver, las letras no se intercambian bien y, además, no quiero calcular los márgenes precisos para cada ancho de letra diferente.
¿Cuál es un mejor enfoque para hacer esto?
Se pueden cambiar dos letras en la misma palabra calculando su posición relativa a su padre con la propiedad offsetLeft .
Resta los valores entre sí y usa Math.abs para mantener el número entero como un número positivo. Este número es la distance entre las dos letras. Una letra tiene que recorrer toda la distancia hacia la izquierda y la otra la misma distancia hacia la derecha para cambiar de posición. Establezca una variable CSS con la distancia para que podamos pasar el cálculo a CSS.
En CSS, podemos usar el :hover para establecer estilos al pasar el mouse y usar la variable CSS para hacer la transición adecuada. Y en lugar de apuntar el cursor sobre una letra, dirija el cursor sobre la palabra completa.
En lugar de margin , use transform ; esta propiedad no interfiere con el diseño y solo manipulará el elemento al que se dirige.
const word = document.querySelector('.word'); const [e, a] = word.querySelectorAll('.letter'); const distance = Math.abs(e.offsetLeft - a.offsetLeft); word.style.setProperty('--distance', `${distance}px`); .word { display: inline-block; padding: 15px; position: relative; font-size: 32px; background-color: #f7f7f7; border: 1px dashed #d0d0d0; border-radius: 3px; cursor: help; } .word .letter { display: inline-block; color: red; transition: color 500ms ease-in-out, transform 500ms ease-in-out; } .word:hover .letter { color: green; } .word:hover .letter:first-of-type { transform: translate(var(--distance), 0); } .word:hover .letter:last-of-type { transform: translate(calc(var(--distance) * -1), 0); } <span class="word"> App<span class="letter">e</span>r<span class="letter">a</span>nt </span>