如何在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'>为<p>每个字符创建一个新的HTML内容，然后将<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> 

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;
}