如何在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;
}