这是我的代码:
$(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/