How To Change Color Of Letter On Mouse Hover In Javascript

This is my code: For example, I want when hovering on r, the color of r to be orange and no other letters.

Solution 1:

You can first create a new HTML content using <span class='x'> for each character in <p> and then replace the HTML of <p> 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+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
})

.x:hover {
  color: orange;
}

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

Solution 2:

You can wrap every letter with a span with class x for example.

Example:

$("#x").html(
  $("#x").text().split("").map(a =>`<span class="x">${a}</span>`)
)

.x:hover {
  color: red;
}

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

Solution 3:

You can definitely solve this problem using CSS. Create a div and inside write a text command with an id. Use the id to reference it in CSS.

.id:hover{
    color: blue;
}