如何在JavaScript中实现鼠标悬停时单个字母变色

嘿，我来帮你搞定这个单个字母悬停变色的需求！你的思路方向是对的——把每个字母单独用容器包裹，再给容器加hover样式，但原代码里的实现逻辑有小问题，我来给你修正并解释清楚～

问题分析 #

你原来的代码里，直接遍历$('p').text()得到的单个字符，然后用$(letter).wrap()是行不通的，因为$(letter)会把单个字符当成DOM选择器去查找元素，而不是创建新的包裹元素。我们需要把每个字符单独转换成带span的HTML片段，再替换掉原p标签的内容。

正确实现代码 #

HTML #

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

CSS #

.letter:hover {
    color: orange;
}

JavaScript #

$(document).ready(function() {
    // 获取p标签里的原始文本
    const text = $('p').text();
    // 把每个字符拆出来，分别包裹成带类名的span
    const wrappedLetters = text.split('').map(char => {
        return `<span class="letter">${char}</span>`;
    }).join('');
    // 把处理好的HTML替换回p标签
    $('p').html(wrappedLetters);
});

代码说明 #

• JS部分：先用text()拿到p标签的纯文本，再用split('')把文本拆成单个字符的数组，接着用map给每个字符（包括空格）都套上<span class="letter">，最后用join('')把数组拼成完整的HTML字符串，再通过html()方法替换掉p标签原来的内容。
• CSS部分：给.letter类添加hover伪类样式，这样鼠标悬停在任意一个span包裹的字母上时，只有这个字母会变成橙色，完全不会影响其他字符～

这样修改后，就能完美实现你想要的效果啦！

内容的提问来源于stack exchange，提问作者Ehsan