如何用CSS、JavaScript或jQuery实现鼠标悬停替换指定文字？

嘿，你的需求我太懂了——几百段内容、上百个要替换的词，纯CSS逐个加类绝对是噩梦！咱们直接说结论：必须用JS/jQuery结合CSS来实现，纯CSS的方案在你的场景下完全不现实，下面给你详细拆解最优实现步骤：

为什么放弃纯CSS？ #

你之前试的CSS方法，每个替换词都要单独写一个类（比如.about:hover::after { content: 'abut'; }），想想看几百个词就要写几百行CSS，不仅写起来疯，后期维护改词、加词也会崩溃，完全不符合效率要求，直接pass。

JS/jQuery + CSS 的完美组合方案 #

这个方案的核心是：用JS批量给所有需要替换的词自动包裹标记元素，再用CSS实现悬停替换效果，全程不用手动碰每个词，扩展性拉满。

第一步：定义替换规则 #

先把所有需要替换的词和对应的原始拼写整理成一个对象，以后要加新词直接往里面加就行，超方便：

const replaceMap = {
  "about": "abut",
  "example": "exampl",
  "test": "tst"
  // 继续添加更多替换规则...
};

第二步：用jQuery批量处理段落文本 #

这段代码会自动遍历所有段落，把匹配到的词包裹成带data-original属性的span标签，data-original存原始拼写，显示的是编辑后的词：

jQuery(document).ready(function($) {
  // 生成匹配所有替换词的正则（全局匹配，不区分大小写，不需要的话去掉'gi'里的'i'）
  const replaceRegex = new RegExp(Object.keys(replaceMap).join('|'), 'gi');

  // 遍历所有p标签，替换文本
  $('p').each(function() {
    const currentHtml = $(this).html();
    // 替换匹配到的词
    const newHtml = currentHtml.replace(replaceRegex, function(matchWord) {
      // 转成小写匹配替换规则（保持原词的大小写显示）
      const lowerWord = matchWord.toLowerCase();
      if (replaceMap[lowerWord]) {
        return `<span class="hover-replace" data-original="${replaceMap[lowerWord]}">${matchWord}</span>`;
      }
      return matchWord; // 没匹配到就返回原词
    });
    $(this).html(newHtml);
  });
});

第三步：用CSS实现悬停替换效果 #

用CSS的::after伪元素结合data-original属性，悬停时覆盖显示原始拼写，不用JS事件，性能更优：

.hover-replace {
  position: relative;
  cursor: help; /* 给用户提示：这里可悬停查看原始内容 */
  text-decoration: underline dotted #666; /* 可选：加个虚线下划线标记可替换的词 */
}

.hover-replace:hover::after {
  content: attr(data-original);
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff; /* 和页面背景色一致，覆盖原来的编辑后词汇 */
  padding: 0 2px;
  border-radius: 2px; /* 可选：加个小圆角更美观 */
}

适配WordPress的使用方法 #

1. 添加JS代码：可以把这段JS代码加到主题的functions.php里（用wp_enqueue_script注册脚本），或者直接在古腾堡编辑器的「自定义HTML」模块里添加（记得用<script>标签包裹）。
2. 添加CSS代码：直接在WordPress后台「外观-自定义-额外CSS」里粘贴即可。

注意事项 #

• 如果不想替换段落里的链接、按钮等元素内的词，可以把选择器从$('p')改成$('p').find(':not(a, button, span)')，或者根据你的需求调整。
• 如果替换词包含特殊字符（比如.、*），记得在正则里转义，比如把"about.me"改成"about\\.me"。
• 大小写匹配：如果需要严格区分大小写（比如About和about对应不同的原始拼写），把正则里的'gi'改成'g'，同时replaceMap里的键也要区分大小写。

这个方案绝对是你场景下的最优解——只需要维护一个替换规则对象，全程自动化处理，后期加词改词都超轻松！

内容的提问来源于stack exchange，提问作者LeahS