javascript - 如何在 JavaScript 中更改鼠标悬停时字母的颜色

Question

这是我的代码:

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

例如，我希望当悬停在 r 上时，r 的颜色为 orange 并且没有其他字母。

Answer 1

您可以先使用 <span class='x'> 创建一个新的 HTML 内容对于 <p> 中的每个字符然后替换 <p> 的 HTML使用该 HTML。现在，当您将鼠标悬停在每个字符上时，该字符的颜色会变为 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>