WordPress（Semplice模板）图片hover显示自定义文本实现方案咨询

嘿，作为刚入门编程的新手，你这个思路真的挺不错的！不过有个小坑得先给你提一下：<img>标签属于替换元素，浏览器默认不会渲染它的:before/:after伪元素，所以你最开始写的CSS代码大概率不会生效。下面给你几个适配Semplice主题的可行方案，从简单到灵活都有：

方案一：用容器+CSS伪元素（最推荐，轻量无JS） #

这个方案解决了img不能加伪元素的问题，而且完全用CSS实现，不需要额外JS：

步骤1：给图片加容器和自定义属性 #

在Semplice编辑器里插入图片后，切换到HTML模式（或者用自定义HTML模块），把图片包裹在一个容器里，同时给容器加data-tooltip属性存你的自定义文本：

<div class="tooltip-container" data-tooltip="这是我要显示的自定义提示文本">
  <img src="你的图片URL" alt="图片的语义化描述（给屏幕阅读器用）" class="tooltip-image">
</div>

如果不想手动写HTML，也可以在Semplice的图片模块里，给图片的父容器添加自定义类tooltip-container，然后通过主题的自定义属性功能给父容器加data-tooltip值。

步骤2：添加自定义CSS #

打开Semplice后台的「主题设置」→「自定义CSS」，粘贴下面的代码：

/* 容器设置相对定位，让伪元素基于它定位 */
.tooltip-container {
  position: relative;
  display: inline-block; /* 适配图片的宽度 */
}

/* hover时显示伪元素 */
.tooltip-container:hover:after {
  content: attr(data-tooltip); /* 读取容器的data-tooltip文本 */
  position: absolute;
  top: -45px; /* 调整到图片上方，可根据需求修改 */
  left: 50%;
  transform: translateX(-50%); /* 水平居中 */
  background-color: rgba(0, 0, 0, 0.85);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap; /* 避免文本换行 */
  z-index: 100; /* 确保提示在最上层 */
}

/* 默认隐藏伪元素，加平滑过渡 */
.tooltip-container:after {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none; /* 避免提示文本挡住图片的hover事件 */
}

方案二：用图片的alt属性（适合复用alt文本的场景） #

如果你想直接用图片的alt文本作为提示内容，可以稍微调整方案一的CSS，把content: attr(data-tooltip)改成content: attr(data-alt)，然后给容器加data-alt属性，值和图片的alt一致：

.tooltip-container:hover:after {
  content: attr(data-alt);
  /* 其他样式和方案一一样 */
}

不过注意哦，alt是给屏幕阅读器和图片加载失败时用的，尽量不要把它当成提示文本的载体，语义上不太严谨～

方案三：JavaScript实现（更灵活的自定义效果） #

如果需要更复杂的提示样式（比如带箭头、多行文本、动态内容），可以用JS来实现：

步骤1：给图片加自定义类和属性 #

在图片的自定义CSS类里输入tooltip-image，同时给图片加data-tooltip属性存提示文本：

<img src="你的图片URL" alt="图片描述" class="tooltip-image" data-tooltip="自定义提示文本">

步骤2：添加自定义JS和CSS #

• 自定义JS（粘贴到Semplice的「自定义JS」或者用插件添加）：

// 遍历所有带tooltip-image类的图片
document.querySelectorAll('.tooltip-image').forEach(img => {
  // 创建提示元素
  const tooltip = document.createElement('div');
  tooltip.className = 'custom-tooltip';
  tooltip.textContent = img.dataset.tooltip || img.alt; // 优先用data-tooltip，没有就用alt
  document.body.appendChild(tooltip);

  // 鼠标悬停时定位并显示
  img.addEventListener('mouseover', (e) => {
    tooltip.style.opacity = '1';
    tooltip.style.visibility = 'visible';
    // 获取图片的位置信息
    const imgRect = img.getBoundingClientRect();
    // 定位到图片上方居中
    tooltip.style.top = `${imgRect.top - tooltip.offsetHeight - 10}px`;
    tooltip.style.left = `${imgRect.left + imgRect.width / 2 - tooltip.offsetWidth / 2}px`;
  });

  // 鼠标离开时隐藏
  img.addEventListener('mouseout', () => {
    tooltip.style.opacity = '0';
    tooltip.style.visibility = 'hidden';
  });
});

• 自定义CSS：

.custom-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 14px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
  pointer-events: none;
  max-width: 200px; /* 限制最大宽度，避免太长 */
}

怎么在Semplice里添加这些代码？ #

1. 自定义CSS/JS：在Semplice后台的「外观」→「自定义」（或者「主题设置」里的「自定义代码」板块），找到对应的输入框粘贴即可。
2. 添加自定义类：在编辑器里选中图片，打开右侧的设置面板，找到「自定义CSS类」输入框，输入你定义的类名（比如tooltip-image）。

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