How change color of letter on mouse hover in javascript

  • A+

This is my code :

$(document).ready(function(){   var letters = $('p').text();   for(var letter of letters) {     $(letter).wrap("<span class='x'></span>");   } })
.x:hover {   color: orange; }
<script src=""></script> <p>Hello World!</p>

for example, I want when hover on r, color of r be orange and no other letters.


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; }
<script src=""></script> <p>Hello World!</p>


:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: