要不要同时用JS和CSS？ #

不需要额外写JS，纯CSS就能实现这个效果，很适合编程基础薄弱的同学上手。

你的现有代码问题及完善方案 #

你当前的代码是给整个figcaption加悬停触发，但我们要的是只有悬停在©图标上才显示标题，所以得调整HTML结构和CSS选择器：

第一步：调整HTML结构 #

先把©图标单独用一个标签包裹，把完整标题存到这个标签的自定义属性里（比如data-title）：

<figcaption>
  <span class="copyright-icon" data-title="这里放你的图片完整标题">©</span>
</figcaption>

第二步：完善CSS代码 #

修改代码，让提示框只在悬停©图标时显示：

/* 给©图标加基础样式，提示用户可交互 */
.copyright-icon {
  cursor: help; /* 鼠标移上去显示问号光标 */
  position: relative;
}

/* 默认隐藏提示框 */
.copyright-icon::after {
  content: attr(data-title); /* 读取自定义属性里的标题内容 */
  position: absolute;
  top: 120%; /* 提示框放在图标下方，避免遮挡 */
  left: 50%;
  transform: translateX(-50%); /* 让提示框相对图标居中 */
  white-space: nowrap; /* 标题不换行 */
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 999; /* 确保提示框在最上层 */
  opacity: 0; /* 默认完全透明隐藏 */
  pointer-events: none; /* 防止提示框干扰鼠标操作 */
  transition: opacity 0.2s ease; /* 加个淡入淡出的动画，更自然 */
}

/* 鼠标悬停图标时，显示提示框 */
.copyright-icon:hover::after {
  opacity: 1;
}

额外优化（可选） #

如果想让提示框更美观，可以加个小三角箭头：

/* 箭头样式 */
.copyright-icon::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #333; /* 箭头颜色和提示框背景一致 */
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 悬停时显示箭头 */
.copyright-icon:hover::before {
  opacity: 1;
}

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