如何实现鼠标悬停时字母变化的效果？

How to achieve an effect where letters change on mouse hover?

提问人：Jigyasa Tuli 提问时间：11/17/2023 更新时间：11/17/2023 访问量：82

问：

我想通过文本块来实现这种效果，其中每个字母在鼠标悬停时都会更改为另一种字体或图标。我无法找到合适的术语来查找这样的东西可以被称为什么。该页面的链接如下。将鼠标悬停在文本上后，您将能够看到效果;

http://www.other-studio.com/

JavaScript HTML CSS

评论

答：

-1赞 Caden Finkelstein 11/17/2023 #1

您必须为每个字母创建一个包装器，然后使用 JavaScript 来控制悬停效果，或者您可以使用 CSS 伪元素。

以下是如何使用CSS做到这一点（我的首选方式）：

首先，html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div class="container">
      <span class="highlight" data-hover="A">a</span>
      <span class="highlight" data-hover="B">b</span>
    </div>
  </body>
</html>

现在，CSS：

.container {
  display: flex;
}

.highlight {
  padding: 10px;
  margin: 5px;
  background-color: lightblue;
  cursor: pointer;
  position: relative;
}

.highlight:hover::before {
  content: attr(data-hover);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightcoral;
}

更改为所需的悬停值！data-hover

如果要更改字体，方法如下：

document.querySelectorAll('.highlight').forEach(function(element) {
  element.addEventListener('mouseenter', function() {
    element.classList.add('changed');
  });
});
.container {
  display: flex;
}

.highlight {
  padding: 10px;
  margin: 5px;
  cursor: pointer;
  font-family: 'Arial', sans-serif;
  /* Default font */
  transition: font-family 0.3s;
}

.highlight.changed {
  font-family: 'Courier New', monospace;
  /* New font */
}

.highlight:hover {
  font-family: 'Courier New', monospace;
  /* Change to new font on hover */
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="container">
    <span class="highlight">a</span>
    <span class="highlight">a</span>
  </div>
</body>

</html>

评论

0赞 Hans-Eric Lippke 11/17/2023
这根本不会复制所提供示例的功能。当角色悬停时，它将被替换为形状相似的新角色。每次悬停时，都会插入一个新字符并替换旧字符。
0赞 Caden Finkelstein 11/17/2023
我看错了，我虽然想要同样的效果，但用字体代替。
-1赞 programORdie 11/17/2023 #2

您可以通过以下方式更改 js 中的字体document.getElementById('id').style.fontFamily = "fontname";

或者只是 CSS：element {font-family: name;} element:hover {font-family: new-name;}

顺便说一句，示例站点的字体更改的源代码在这里： http://www.other-studio.com/assets/bundle.js?v=1.2.7

评论

0赞 Hans-Eric Lippke 11/17/2023
它不是字体更改。从字面上看，它被一个新角色所取代。
1赞 Hans-Eric Lippke 11/17/2023 #3

不太难。

我能够用一些简单的 JavaScript 复制类似于示例的东西。

注意： 您可以将任何所需的字符作为原始字符的可能替换插入到替换符号数组中。

const replacementSymbols = {
    a: ['α', '@', 'ä', 'å', 'ª'],
    b: ['β', 'ß', 'Ъ', '♭', 'ƀ'],
    c: ['¢', '©', 'ç', 'č', 'ċ'],
    d: ['δ', 'ð', 'đ', 'ď', 'ɖ'],
    e: ['ε', 'ë', 'ē', 'ĕ', 'ė'],
    f: ['ƒ', 'ϕ', 'φ', 'ғ', 'Ƒ'],
    g: ['γ', 'ğ', 'ġ', 'ģ', 'ǥ'],
    h: ['η', 'ħ', 'ȟ', 'ĥ', 'ɦ'],
    i: ['ι', 'ï', 'ī', 'ĭ', 'į'],
    j: ['ĵ', 'ɉ', 'ǰ', 'ʝ', 'ϳ'],
    k: ['κ', 'ķ', 'ĸ', 'ƙ', 'қ'],
    l: ['λ', 'ľ', 'ĺ', 'ļ', 'ł'],
    m: ['μ', 'м', 'ɱ', 'ӎ', 'Ӎ'],
    n: ['η', 'ñ', 'ň', 'ŋ', 'ɲ'],
    o: ['σ', 'ø', 'ö', 'ő', 'º'],
    p: ['ρ', 'π', 'ψ', 'þ', 'ƥ'],
    q: ['ϙ', 'ҩ', 'ɋ', 'գ', 'ʠ'],
    r: ['я', 'ř', 'ŗ', 'ɍ', 'ɾ'],
    s: ['š', 'ş', 'ß', 'ś', 'ș'],
    t: ['τ', 'ť', 'ţ', 'ƭ', 'ț'],
    u: ['υ', 'ü', 'ū', 'ů', 'ű'],
    v: ['ν', 'ѵ', 'ѷ', 'ⱱ', 'ⱴ'],
    w: ['ω', 'ẁ', 'ẃ', 'ŵ', 'ẅ'],
    x: ['ξ', 'х', 'ҳ', 'ӽ', 'ӿ'],
    y: ['γ', 'ÿ', 'ý', 'ŷ', 'ƴ'],
    z: ['ζ', 'ż', 'ź', 'ž', 'ƶ']
};

document.querySelectorAll('.character-wrapper').forEach(wrapper => {
    const original = wrapper.querySelector('.character-original');
    const replacement = wrapper.querySelector('.character-replacement');

    wrapper.addEventListener('mouseover', () => {
        const originalChar = original.textContent.toLowerCase();
        const symbols = replacementSymbols[originalChar];

        if (symbols && symbols.length > 0) {
            const randomSymbol = symbols[Math.floor(Math.random() * symbols.length)];
            replacement.textContent = randomSymbol;
            original.style.display = 'none';
            replacement.style.display = 'inline';
        }
    });

});
<h1 class="ogg-header ogg-header--indent">
  <p>
    <!-- "The quick" -->
    <span class="character-wrapper">
      <strong class="character-original">T</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">h</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">e</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">q</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">u</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">i</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">c</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">k</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <!-- "brown fox jumps" -->
    <span class="character-wrapper">
      <strong class="character-original">b</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">r</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">o</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">w</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">n</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">f</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">o</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">x</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">j</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">u</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
    <span class="character-wrapper">
      <strong class="character-original">m</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <strong class="character-original">p</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <strong class="character-original">e</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <strong class="character-original">d</strong>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">o</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">v</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">e</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">r</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">t</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">h</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">e</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">L</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">A</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">Z</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">Y</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">&nbsp;</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">d</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">o</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">g</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>
     <span class="character-wrapper">
      <span class="character-original">.</span>
      <span class="character-replacement" style="font-family: sans-serif; display: none;"></span>
    </span>   
  </p>
</h1>

上一个：如何制作一个全球存储数据的网站？[关闭]

下一个：文本渲染 CSS [已关闭]