How to change color of letter on mouse hover in JavaScript

Answer 1

You can first create a new HTML content using for each character in

and then replace the HTML of

with that HTML. Now, when you hover over each character then the color of that character changes to orange

$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+=""+letter+"";
  }
  $('p').html(nHTML);
})

.x:hover {
  color: orange;
}

Hello World!