如何改变鼠标悬停在JavaScript上的字母颜色?

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.

例如，我想在r上停留的时候，r的颜色是橙色的，没有其他字母。

2 个解决方案

#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

在

中，您可以首先使用创建一个新的HTML内容，然后用该HTML替换

的HTML。现在，当你把鼠标悬停在每个字符上时，这个字符的颜色就会变成橙色。

$(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>

#2

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

例如，你可以用一个span来包装每个字母。

Example:

例子:

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

.x:hover{
  color: red;
}

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

#1

在