Me gustaría animar partes de un párrafo. Si transformo mi etiqueta p, transforma toda la caja.
He visto esto antes y me estoy pateando a mí mismo por no guardar la respuesta de stackoverflow, y ahora he estado buscando una respuesta durante más de una hora y parece que no puedo encontrarla ni ninguna forma de resolverlo. .
Básicamente, me gustaría que las letras sobre las que pasa el cursor sobresalgan del texto. Pensé que esto podría hacerse con CSS, pero javascript también es bienvenido.
Puede usar JavaScript para envolver cada letra en un span , luego aplique su estilo cuando span:hover . El JavaScript a continuación hace esto para cada letra que no es un espacio.
var text = document.getElementById('jump').innerHTML; var result = ''; for (var i = 0; i < text.length; i++) { var char = text.substring(i, i + 1); if (char == ' ') { result += char; } else { result += '<span>' + char + '</span>'; } } document.getElementById('jump').innerHTML = result; p#jump { line-height: 30px; } #jump span:hover { display: inline-block; transform: translateY(-10px); } <p id="jump">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>