How to change the letters in a text on hover

Question

I'm looking for a way to change the letters in a text when you hover them. After that, they will eventually not got back to normal and stay changed. So I found a code to change the color of each letter of a text, but I'm looking for the same thing that picks the next leter in the alphabet.

Thanks a lot for the help.

$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
})

.x:hover {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>Hello World!</p>

I also found this code that let you change a text with an id. I just don't know how to apply that to all my characters individually.

const $foo = $('#foo');

$foo.hover(function(){
  $foo.text('Blah');
}, function(){
  $foo.text('Foo');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <li><a href="#0" id="foo">Foo</a></li>
</nav>

Also, I have this script that can find the next letter.

function LetterChanges(str) {
    var result = "";
    for (var i = 0; i < str.length; i++) {
        if (122 == str.charCodeAt(i)) {
            result += "a";
        } else if (90 == str.charCodeAt(i)) {
            result += "A";
        } else if ((65 <= str.charCodeAt(i) && str.charCodeAt(i) <= 89) || (97 <= str.charCodeAt(i) && str.charCodeAt(i) <= 121)) {
            result += String.fromCharCode(str.charCodeAt(i) + 1);
        } else {
            result += str.charAt(i);
        }
    }
    return result;
}

console.log(LetterChanges("AaZz+cod!foo"));
$('#result').html(LetterChanges("paul & rémi"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="result"></h1>

Answer 1

If I understand what you need, then this is the solution:

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
  $(".x").hover(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})

Explanation:

• nextLetter
  • checks whether it's a letter and does nothing if it's not a letter
  • if it's a Z or z, then will start over the alphabet, keeping the case
  • otherwise finds the next letter
• the for cycle creates spans containing single letters, having the class of x
• this is why the CSS hover rule works
• we can create Javascript/jQuery events
• I have created a Javascript event which changes the letter to the next one on hover

Fiddle: https://jsfiddle.net/1ar8uL4s/