如何在悬停时更改文本中的字母

Question

我正在寻找一种方法来在您将鼠标悬停在文本中时更改它们。在那之后，他们最终不会恢复正常并保持变化。所以我找到了一个代码来更改文本中每个字母的颜色，但我正在寻找选择字母表中下一个字母的相同内容。

非常感谢您的帮助。

$(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: red;
}

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

我还发现这段代码可以让您更改带有 ID 的文本。我只是不知道如何将它分别应用到我的所有角色。

const $foo = $('#foo');

$foo.hover(function(){
  $foo.text('Blah');
}, function(){
  $foo.text('Foo');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
  <li><a href="#0" id="foo">Foo</a></li>
</nav>

此外，我有这个脚本可以找到下一个字母。

function LetterChanges(str) {
    var result = "";
    for (var i = 0; i < str.length; i++) {
        if (122 == str.charCodeAt(i)) {
            result += "a";
        } else if (90 == str.charCodeAt(i)) {
            result += "A";
        } else if ((65 <= str.charCodeAt(i) && str.charCodeAt(i) <= 89) || (97 <= str.charCodeAt(i) && str.charCodeAt(i) <= 121)) {
            result += String.fromCharCode(str.charCodeAt(i) + 1);
        } else {
            result += str.charAt(i);
        }
    }
    return result;
}

console.log(LetterChanges("AaZz+cod!foo"));
$('#result').html(LetterChanges("paul & rémi"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="result"></h1>

Answer 1

如果我了解您的需求，那么这就是解决方案：

function nextLetter(ch) {
    if (!ch.match(/[a-z]/i)) return ch;
    else if (ch === 'Z') return 'A';
    else if (ch === 'z') return 'a';
    return String.fromCharCode(ch.charCodeAt(0) + 1);
}
$(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(function(e) {
    if (e.type === "mouseenter") $(this).text(nextLetter($(this).text()));
  });
})

解释：

下一封信
- 检查它是否是字母，如果不是字母则什么也不做
- 如果是 Z 或 z，则将重新开始字母表，保持大小写
- 否则找到下一个字母
for 循环创建包含单个字母的跨度，具有 x
这就是 CSS hover 规则有效的原因
我们可以创建 Javascript/jQuery 个事件
我创建了一个 Javascript 事件，它在鼠标悬停时将字母更改为下一个字母

Fiddle: https://jsfiddle.net/1ar8uL4s/

如何在悬停时更改文本中的字母

How to change the letters in a text on hover

javascript

letter

hover