如何使单词中的每个字母在悬停时改变

How to make each letter in word change on hover

本文关键字：悬停 改变 何使单      更新时间：2023-09-26

假设我在网站的某个段落中有一个单词"IamGreat"，我想让它在悬停时变成"Good4you"。但是，我不想改变整个单词，我想让每个字母单独改变。因此，如果我将鼠标悬停在字母"I"上，它会变成字母"G"，字母"r"会变成数字"4"，等等。这两个词的长度相同。如果可能的话，我还想改变正在改变的字母的css(字体颜色，字体变化等)。是否有一种方法，我可以做到这一点使用jQuery或javascript?

span {
  font-size: 3em;
  position: relative;
}
span:after {
  position: absolute;
  content: attr(content);
  top: 0;
  left: 0;
  -webkit-transition: all 750ms;
  -moz-transition: all 750ms;
  -o-transition: all 750ms;
  transition: all 750ms;
  -webkit-transform-origin: bottom left;
  -ms-transform-origin: bottom left;
  transform-origin: bottom left;
}
span:hover:after {
  -webkit-transform: skew(10deg, 25deg);
  -ms-transform: skew(10deg, 25deg);
  transform: skew(10deg, 25deg);
}
<span content="H">H</span>
<span content="o">o</span>
<span content="v">v</span>
<span content="e">e</span>
<span content="r">r</span>

我会在jquery中使用这个场景

  • 获取字符串长度(获取字符串中所有字符的索引)
  • 获取大写字符及其索引(A,B,C)
  • 所以你遍历这个数组，当找到第一个大写字符时，将其替换为第二个字符串中的第一个字符("good4you")，直到下一个大写字符，你将只是"子字符串"第一个字符串…
  • 如何应用CSS你有答案在这里通过jQuery/Javascript添加悬停CSS属性

希望我能给你一些启示

也许这会有所帮助:

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);
  }
}

我创建的wow函数创建了自动添加其向后兼容的onmouseenter和onmouseleave事件的跨度。要样式这些跨度，你可以使sp.className = 'over'; onmouseover和sp.className = 'default'; onmouseout，并有相应的CSS。对于单独的样式，您必须向wow函数添加更多的数组。sp也可以是onmouseover和onmouseout中的this。

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