如何在WordPress中实现鼠标悬停文本高亮效果？

当然可以实现，下面给你两种实用方法，对应不同的高亮效果：

方法一：滑动式高亮（纯CSS实现） #

这种是鼠标悬停时，高亮背景从左到右覆盖文字，适合段落或整块文本：

1. 打开WordPress后台，进入「外观」→「自定义」→「额外CSS」（部分主题叫「自定义CSS」）
2. 粘贴以下代码：

/* 滑动高亮效果 */
.highlight-slide {
  position: relative;
  display: inline;
}

.highlight-slide::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #fff2a8; /* 可替换成你想要的高亮颜色 */
  z-index: -1;
  transition: width 0.3s ease;
}

.highlight-slide:hover::after {
  width: 100%;
}

3. 使用方式：
   • 若想让所有段落生效，把代码里的.highlight-slide换成p即可
   • 若只想给特定文字生效，在古腾堡编辑器里选中目标文字，右侧区块设置中添加「额外类名」highlight-slide

方法二：鼠标跟随式高亮（JS+CSS实现，匹配示例效果） #

这种效果是高亮块随鼠标位置移动，和你提供的示例更贴合：

1. 先添加CSS：同样在「额外CSS」里粘贴以下代码

/* 跟随高亮容器 */
.highlight-follow {
  position: relative;
  display: inline-block;
}

/* 高亮块样式 */
.highlight-follow .highlight-block {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 100%;
  background-color: #fff2a8;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: 3px;
}

2. 添加JavaScript：可以用「自定义CSS & JS」插件，或者主题自带的自定义JS功能，粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 找到所有带跟随高亮类的元素
  const highlightItems = document.querySelectorAll('.highlight-follow');
  highlightItems.forEach(item => {
    // 鼠标移动时调整高亮块位置
    item.addEventListener('mousemove', function(e) {
      const rect = this.getBoundingClientRect();
      const mouseX = e.clientX - rect.left;
      const highlight = this.querySelector('.highlight-block');
      // 调整高亮块偏移，让它更贴合鼠标位置
      highlight.style.left = `${mouseX - 20}px`;
    });
    // 鼠标进入显示高亮块
    item.addEventListener('mouseenter', function() {
      this.querySelector('.highlight-block').style.opacity = '1';
    });
    // 鼠标离开隐藏高亮块
    item.addEventListener('mouseleave', function() {
      this.querySelector('.highlight-block').style.opacity = '0';
    });
  });
});

3. 使用方式：在编辑器里切换到「代码编辑器」，把需要高亮的文字用以下标签包裹：

<span class="highlight-follow">这里是需要添加跟随高亮的文字<span class="highlight-block"></span></span>

注意事项 #

• 高亮颜色可以自行修改，把代码中的#fff2a8换成你需要的十六进制颜色码
• 修改后如果看不到效果，记得清除WordPress缓存和浏览器缓存
• 不同主题的自定义CSS/JS入口可能略有不同，找不到的话可以查看主题文档

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