使用CSS、JavaScript或jQuery在悬停时更改单词？

我目前正在做一个项目，我希望当你将鼠标悬停在原来的单词“about”上时，段落中的一个特定单词（例如：about）可以变成另一个单词（例如：abut）

创建单词更改（当鼠标悬停在该单词上时）的目的是让web访问者在鼠标悬停在某个单词上时看到旧文档中单词的原始[拼写]，而不是仅仅阅读编辑过的版本

我已经在简单的CSS（这里的CodePen示例：）中对此进行了一些讨论，但是我想知道如上所述创建单词更改的最佳方法。有没有办法只使用CSS？还是使用jQuery或Javascript更好？我目前只知道粗略的JavaScript和jQuery，但如果有帮助的话，我将学习这两种语言

感谢您的回答和见解，感谢您抽出时间发表评论

注:

1：每个段落必须更改多个单词，以及多个（超过100个）段落。如果可能的话，我不想为每个单词创建唯一的CSS类

2：我想用WordPress

3：我是初学者

代码笔代码：

<style>
.quote:hover .update, .quote .orig {
  display: none;
}
.quote:hover .orig {
  display: inline-block;
}
.quote .update {
  color: blue;
  font-weight: bold;
}
.quote .orig {
  font-style: italic;
}

</style>

<div>We went
<span class="quote">
<spell class="update">about</spell>
<spell class="orig">abut</spell>
</span>
our
<span class="quote">
<spell class="update">business</spell>
<spell class="orig">busness</spell>
</span>
.
</div>

.quote:hover.update、.quote.orig{
显示：无；
}
.quote:hover.orig{
显示：内联块；
}
.quote.update{
颜色：蓝色；
字体大小：粗体；
}
.quote.orig{
字体：斜体；
}
我们去了
关于
毗邻
我们的
商业
忙碌
.

您可以将这两个元素包装在一个范围内，并将悬停从该元素上移开，这样子元素的隐藏不会影响悬停状态

.swappable.orig{display:none；}
.swappable:hover.orig{display:inline block；}
.swappable:hover.update{display:none；}
.swapable{color:blue；}

我们去了
关于
毗邻
我们的
商业
忙碌
.

我对html做了几处修改，使其正常工作，并使两个版本的拼写都在一个称为“change”的范围内。这远非完美，但我想这只是一个开始

.changed:hover.update{
显示：无；
}
.更改：悬停。原始{
显示：内联块；
}
.quote.update{
颜色：蓝色；
字体大小：粗体；
}
.quote.orig{
字体：斜体；
显示：无；
}
.改变{
光标：指针
}

我们去了
阿布塔布特
我们的
经商
.

根据您提供的HTML代码，使用普通的CSS显示另一个单词，简单如下：

spell.update:hover + spell.orig, spell.orig:hover {
 display:inline-block;
}

如果您想在他们查看原始拼写时隐藏更新的拼写，您可能会发现将两者都包含在一个范围内会很有帮助，因此您可以执行以下操作：

span.spelling-container:hover>.orig {
 display:inline-block;
}
span.spelling-container:hover>.update {
 display:none;
}

---

您可以使用数据属性和CSS来显示这两个不同的单词

span[数据拼写]{
显示：内联块；
边框底部：1px点灰色；
光标：帮助；
}
span[数据拼写]：：之前，
span[数据拼写]：：之后{
显示：无；
}
span[数据拼写]：：之前{
内容：attr（数据拼写）；
}
span[数据拼写]：：之后{
内容：attr（数据原件）；
}
span[原始数据]：不（：悬停）：：之前，
span[数据拼写]：悬停：：之后{
显示：块；
}

我们走了自己的路。

好吧，只要看一下你的css

。quote:hover

是在用户将鼠标悬停在quote上时定义一个规则，而不一定是更新或源代码。仅使用css执行此操作的唯一问题是，一旦您悬停并隐藏原始文件，隐藏将导致悬停结束，因此它将再次显示，然后再次隐藏，再次显示，然后。。。