ALT属性无法在图片链接上生成悬停文本问题求助

别担心，这种小问题真的很常见，尤其是在Tumblr这种自带编辑器的平台上，很容易被自动处理的代码搞懵！先帮你理清几个关键点，再给你可行的解决方案：

先纠正一个核心误解：alt不是悬停文本！ #

你之前以为alt能显示悬停提示，其实是个巧合——alt属性的作用是图片加载失败时显示的替代文本，或者给屏幕阅读器读取用的，它本身不会在鼠标悬停时弹出提示。真正负责悬停文本的是title属性，这才是你需要用的。

另外，Chrome自动把alt移到src前面是浏览器的正常优化行为，完全不影响功能，这个不用管它。

解决方案1：正确使用title属性（最简单） #

你说title会破坏链接，大概率是Tumblr的可视化编辑器在捣鬼——它可能会自动过滤或修改你手动加的属性。建议你切换到纯HTML编辑模式（在Tumblr主题编辑里找「代码视图」，别用可视化界面改），直接粘贴下面的代码：

<h1 style="padding: 7px; font-size: 8px; font-family: calibri; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: #8f8d8d; line-height: 15px; background: #282828;">Bring a friend, join the crowd</h1>
<p><a href="/soren" title="Soren">
  <img src="https://i.imgur.com/qsrZHVo.png" 
       style="width: 50px; border-radius: 100%; border: 6px solid #282828;" 
       alt="Soren Chang" />
</a></p>

你可以把title加在<a>标签上，也可以加在<img>标签上，两种都能实现悬停显示「Soren」的效果，而且不会破坏链接功能。

解决方案2：用CSS自定义悬停文本（更灵活） #

如果Tumblr编辑器还是对title属性有问题，那可以用CSS来实现自定义的悬停提示，样式还能和你的主题匹配：

1. 先修改图片链接的HTML，给它加一个类名：

<h1 style="padding: 7px; font-size: 8px; font-family: calibri; text-transform: uppercase; text-align: center; letter-spacing: 1px; color: #8f8d8d; line-height: 15px; background: #282828;">Bring a friend, join the crowd</h1>
<p><a href="/soren" class="friend-link">
  <img src="https://i.imgur.com/qsrZHVo.png" 
       style="width: 50px; border-radius: 100%; border: 6px solid #282828;" 
       alt="Soren Chang" />
</a></p>

2. 然后在你的Tumblr主题的CSS部分（通常是主题设置里的「自定义CSS」或者代码里的<style>标签内）添加这段样式：

.friend-link {
  position: relative;
  display: inline-block;
}
.friend-link:hover::after {
  content: "Soren"; /* 这里是悬停要显示的文本 */
  position: absolute;
  bottom: 120%; /* 调整文本位置，避免挡住图片 */
  left: 50%;
  transform: translateX(-50%);
  background: #282828; /* 和你的标题背景色一致 */
  color: #8f8d8d; /* 和你的标题文字色一致 */
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: calibri;
  white-space: nowrap;
}

这种方法不仅能实现悬停提示，还能完全自定义提示框的样式，和你的主题风格统一，而且不会被编辑器的自动处理干扰。

为什么之前短暂生效？ #

大概率是你之前误打误撞用了title属性，后来修改代码时不小心删掉了，或者被编辑器自动清除了——Tumblr的可视化编辑器有时候会过滤它认为「不必要」的属性。

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