非开发者求WordPress文字悬停切换图片的插件或实现方法

作为非开发者，你有几种简单的方式实现这个功能，下面按易用程度排序：

方法一：使用页面构建器（最推荐，零代码） #

大多数主流WordPress页面构建器都内置了悬停交互功能，操作起来非常直观：

• Elementor：添加「文本部件」和「图片部件」，选中图片部件后，在右侧面板的「高级」选项中找到「悬停效果」，或用「自定义CSS」设置默认隐藏图片、仅鼠标悬停文本时显示。也可以搜索Elementor的「图片切换」扩展部件，直接拖拽使用。
• Beaver Builder：添加文本模块和图片模块后，通过模块的「高级」设置自定义悬停状态，或使用内置交互工具实现文本触发图片显示。

方法二：使用专用插件 #

有不少轻量级插件可以帮你快速实现需求，无需手动写代码：

• Hover Image Swap：安装激活后，通过短码即可设置触发文本、默认图片和悬停图片。比如在文章或页面中插入类似 [hover_swap text="悬停我看图片" default_img="默认图片URL" hover_img="悬停时显示的图片URL"] 的短码即可。
• Image Hover Effects Ultimate：虽然主打图片悬停效果，但也支持文本触发的图片切换，可在插件设置中自定义触发元素和目标图片。

方法三：复制粘贴简易代码（适合愿意尝试小操作的用户） #

如果你不想安装额外插件，可以用一段简单的HTML和CSS实现：

1. 先把需要的两张图片上传到WordPress媒体库，复制它们的图片URL。
2. 在文章或页面中添加「自定义HTML」部件，插入以下代码（替换示例中的图片URL和文本）：

<div class="hover-img-wrap">
  <span class="hover-text">把鼠标移到我上面</span>
  <img src="你的默认图片URL" alt="默认图片" class="target-img">
</div>

3. 进入「外观」→「自定义」→「额外CSS」，粘贴以下样式代码：

.hover-img-wrap {
  position: relative;
  display: inline-block;
}

.target-img {
  display: none;
  position: absolute;
  top: 30px; /* 调整图片相对于文本的位置 */
  left: 0;
  z-index: 99;
}

.hover-text:hover + .target-img {
  display: block;
}

4. 保存设置后，预览页面就能看到效果。如果需要多个交互，重复步骤2并修改文本和图片URL即可。

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