如何在HTML中为图片添加可点击文字链接并实现悬停变色效果

你当前代码有两个核心问题：

• HTML结构错误：<div class="container">放在了<body>标签外部，所有页面可见内容必须放在<body>标签内部
• 缺少CSS定位规则，默认元素会按照上下顺序排列，无法叠加在图片上方

以下是完整可直接运行的修改后代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>图片上添加可点击文字</title>
    <style>
        /* 父容器设为相对定位，作为内部绝对定位元素的位置参照 */
        .container {
            position: relative;
            width: fit-content;
        }
        /* 图片基础样式，消除默认边距 */
        .container img {
            display: block;
            width: 100%;
            height: auto;
        }
        /* 可点击文字的基础样式与定位规则 */
        .img-text-link {
            position: absolute;
            /* 调整以下两个数值即可修改文字在图片上的位置 */
            top: 25px;
            left: 40px;
            /* 文字基础样式可按需修改 */
            font-size: 22px;
            color: #ffffff;
            text-decoration: none;
        }
        /* 鼠标悬停时的文字样式，可自定义颜色等效果 */
        .img-text-link:hover {
            color: #ffcc00;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <img src="https://growingseedsavers.org/content/images/2021/11/asd.png" alt="Snow">
        <!-- 可点击文字放在容器内部，才能叠加在图片上方 -->
        <a href="https://google.com" class="img-text-link">Text</a>
    </div>
</body>
</html>

• 定位规则：父容器设置position: relative后，内部设置position: absolute的元素就可以脱离默认的上下排列逻辑，相对于父容器的左上角定位，调整top/left参数即可把文字放在图片任意位置
• 悬停变色：通过CSS的:hover伪类可以定义元素被鼠标悬停时的样式，修改color属性即可实现悬停变色效果

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