jQuery+CSS字母动画：二次hover显示标签异常问题求助

这个问题的核心原因很明确：你每次触发mouseenter时，都是从当前.firstName元素的HTML内容里提取字符串，但第一次hover后，元素内容已经被替换成了带有<span>标签的结构，第二次再获取时，拿到的就是这些标签代码，拆分后自然会把标签字符当成普通文本显示出来。

举个例子：第一次hover前，元素内容是Eden Hazani；第一次hover后，内容变成了<span class='animation0'>E</span><span class='animation1'>d</span>...；第二次hover时，你用.html()拿到的就是这段带标签的字符串，拆分后会把<、s、p这些字符都当成单独的"字符"去包裹新的span，最终页面就会显示这些标签代码。

解决方法 #

我们只需要提前保存原始的文本内容，每次hover都基于原始文本处理，而不是从当前元素的HTML里读取。具体修改如下：

1. 在页面初始化时，把.firstName的原始文本保存到一个变量中；
2. 触发mouseenter时，使用这个保存好的原始文本进行拆分，而不是每次读取当前元素的HTML。

修改后的完整JS代码：

$(function() {
 var $win = $(window), w = 0, h = 0, rgb = [], getWidth = function() {
 w = $win.width();
 h = $win.height();
 };
 // 保存原始的名字文本
 const originalName = $('.firstName').text().trim();
 $win.resize(getWidth).mousemove(function(e) {
 rgb = [
 Math.round(e.pageX / w * 255),
 Math.round(e.pageY / h * 255),
 150
 ];
 $(document.body).css('background', 'rgb(' + rgb.join(',') + ')');
 }).resize();
 $('.firstName').on('mouseenter', function () {
 // 使用保存的原始文本拆分，而不是读取当前HTML
 let [firstName, lastName] = originalName.split(' ');
 let firstNameArray = firstName.split('');
 let lastNameArray = lastName.split('');
 $('.firstName').html('');
 for (letter of firstNameArray) {
 let radomizer = Math.floor(Math.random() * 3);
 $('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
 }
 $('.firstName').append(' ')
 for (letter of lastNameArray) {
 let radomizer = Math.floor(Math.random() * 3);
 $('.firstName').append(`<span class='animation${radomizer}'>${letter}</span>`);
 }
 });
});

额外优化点 #

• 把代码里的<和>改成了真实的<和>，避免浏览器把标签当成文本显示；
• 使用数组解构拆分名字，让代码更简洁；
• 用.text()而不是.html()获取原始内容，确保拿到的是纯文本，不会包含任何HTML标签。

这样修改后，无论你hover多少次，都会基于原始的Eden Hazani文本生成动画，再也不会出现显示标签代码的问题了。

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