这是我的代码:

$(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而没有其他字母。

最佳答案

您可以首先使用<span class='x'><p>中的每个字符创建新的HTML内容,然后用该HTML替换<p>的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>

关于javascript - 如何在JavaScript中的鼠标悬停时更改字母的颜色,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50422767/

10-11 23:29
查看更多