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

Question

这是我的代码：

＆＃13;

＆＃13;

$(document).ready(function(){
  var letters = $('p').text();
  for(var letter of letters) {
    $(letter).wrap("<span class='x'></span>");
  }
})

＆＃13;

.x:hover {
  color: orange;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

例如，我希望将鼠标悬停在r上时，r的颜色为orange，而不是其他字母。

Answer 1

您可以先为<span class='x'>中的每个字符使用<p>创建新的HTML内容，然后将<p>的HTML替换为该HTML。现在，当您将鼠标悬停在每个字符上时，该字符的颜色将更改为orange

＆＃13;

＆＃13;

$(document).ready(function(){
  var letters = $('p').text();
  var nHTML = '';
  for(var letter of letters) {
    nHTML+="<span class='x'>"+letter+"</span>";
  }
  $('p').html(nHTML);
})

＆＃13;

.x:hover {
  color: orange;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

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

示例：

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

Answer 3

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

.id:hover{
    color: blue;
}