如何在JavaScript中鼠标hover时更改字母的颜色

这是我的代码：

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

 .x:hover { color: orange; } 

  
Hello World! 

例如，我想要在r盘旋时， r的颜色为orange而没有其他字母。

Answer 1

您可以先使用为

每个字符创建一个新的HTML内容，然后将

的HTML替换为该HTML。 现在，当您将鼠标hover在每个字符上时，该字符的颜色将变为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! 

Answer 2

例如，您可以使用带有类x的跨度来包装每个字母。

例：

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

 .x:hover{ color: red; } 

  
Hello World! 

Answer 3

你绝对可以使用CSS解决这个问题。 创建一个div并在里面写一个带id的文本命令。 使用id在CSS中引用它。

 .id:hover{ color: blue; }