How to change color of letter on mouse hover in JavaScript

  • A+
Category:Languages

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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p>Hello World!</p>

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

Thank you!


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="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <p>Hello World!</p>

Comment

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