Javascript 如何使单词中的每个字母在悬停时发生变化

假设我在我的网站的某个段落中有一个单词“iamgreet”，我希望它在hover上改为“Good4you”。但是，我不想改变整个单词，而是希望每个字母都单独改变。因此，如果我将鼠标悬停在字母“I”上，它将变成字母“G”，字母“r”将变成数字“4”等。这两个单词的长度相同。如果可能的话，我也想更改正在更改的字母的css（字体颜色、字体变体等）。有没有一种方法可以使用jQuery或javascript实现这一点？

我喜欢jQuery中的这种场景

• 获取字符串长度（获取字符串中所有字符的索引）
• 获取大写字符及其索引（A、B、C）
• 因此，您遍历这个数组，当找到第一个大写字符时，将其替换为第二个字符串中的第一个字符（“good4you”），直到下一个大写字符，您将只“子字符串”第一个字符串
• 如何应用CSS你在这里有答案吗

希望我能给你一些想法：）

span{
字号：3em；
位置：相对位置；
}
跨度：之后{
位置：绝对位置；
内容：attr（content）；
排名：0；
左：0；
-webkit转换：所有750ms；
-moz转换：所有750ms；
-o-过渡：所有750ms；
过渡：所有750ms；
-webkit变换原点：左下角；
-ms变换原点：左下角；
变换原点：左下角；
}
跨度：悬停：之后{
-webkit变换：倾斜（10度、25度）；
-ms变换：倾斜（10度、25度）；
变换：倾斜（10度，25度）；
}

H
o
v
E
r

也许这会有帮助：

var doc = document, bod = doc.body;
function E(e){
  return doc.getElementById(e);
}
function inArray(value, array){
  for(var i=0,l=array.length; i<l; i++){
    if(array[i] === value){
      return true;
    }
  }
  return false;
}
function wow(string, outputElement, beforeArray, afterArray){
  var s = string.split('');
  for(var i=0,l=s.length; i<l; i++){
    (function(i){
      var sp = doc.creatElement('span'), t = s[i];
      sp.innerHTML = t;
      sp.onmouseover = function(ev){
        var e = ev || event;
        var rt = e.relatedTarget;
        while(rt && rt !== sp){
          rt = rt.parentNode;
        }
        if(rt !== sp && inArray(t, beforeArray) && afterArray[beforeArray.indexOf(t)]){
          sp.innerHTML = afterArray[beforeArray.indexOf(t)];
        }
      }
      sp.onmouseout = function(ev){
        var e = ev || event;
        var rt = e.relatedTarget;
        while(rt && rt !== sp){
          rt = rt.parentNode;
        }
        if(rt !== sp){
          sp.innerHTML = t;
        }
      }
      outputElement.appendChild(sp);
    })(i);
  }
}

---

你需要把每一个字母分开。如果您想实现自动化，可以帮助您实现这一点。然后，您将循环遍历每个跨度，更改内容，稍等片刻，然后进入下一个跨度。这应该不是很难做到，下面是一个简单的示例->您尝试了什么？这是为了帮助解决编码问题，而不是为你做所有的设计和编码。@JukkaK.Korpela哦，我只是想知道我将如何开始做这件事。Rich所说的关于使用不同的span标记的话足以让我继续。对不起，如果我的问题没有把这个信息说清楚。另外，他们可能有一些东西让我用几行代码来做这件事，我根本不知道，所以我在这里询问，看看是否存在类似的事情：）

// appends to id='someId'
wow('Just Adding Some Random Text', E('someId'), ['J', 'T'], ['M', 'S']);